【CSS】打ち消し線（delタグ）をカスタマイズする

打ち消し線を二重線にできますかー？

できますよー

いろんなパターンを実装してみる

簡単に<del>タグで囲っちゃえば打ち消し線はできるのですが、文字サイズが違うテキストに打ち消し線をつけると線が切れちゃいます。
そんな時は<del>タグをカスタマイズしちゃいましょう。

まとめてみました。

打ち消し線の色を変える

text-decorationをナシ（none）にしてbackgroundで装飾するだけなので簡単です。
グラデーション（linear-gradient）で色を変えています。

HTMLとCSSはこちら

HTML

<del class="c_del_1">4,000<span class="yen">円</span><span class="tax">（税込4,400円）</span></del>

CSS

del.c_del_1 {
  background-image: linear-gradient(#e70000, #e70000);
  background-position: 0 50%;
  background-size: 100% 1px;
  background-repeat: repeat-x;
  text-decoration: none;
  padding: 0 2px;
}

打ち消し線を二重にする

text-decorationをナシ（none）にしてbackgroundで装飾するだけなので簡単です。
二重線も、グラデーション（linear-gradient）の応用で作っています。
なんだかややこしそうですが数値と色をいろいろ変えてみると新たな発見があるかもしれません。

HTMLとCSSはこちら

HTML

<del class="c_del_2">4,000<span class="yen">円</span><span class="tax">（税込4,400円）</span></del>

CSS

del.c_del_2 {
  background-image: linear-gradient(transparent 0.5em, #e70000 0, #e70000 calc(0.5em + 1px), transparent 0, transparent calc(0.5em + 3px), #e70000 0, #e70000 calc(0.5em + 4px), transparent 0);
  text-decoration: none;
  padding: 0 2px;
}

打ち消し線を太くする

text-decorationをナシ（none）にしてbackgroundで装飾するだけなので簡単です。
太くするには、background-sizeを調整してあげればオッケーです。

HTMLとCSSはこちら

HTML

<del class="c_del_3">4,000<span class="yen">円</span><span class="tax">（税込4,400円）</span></del>

CSS

del.c_del_3 {
  background-image: linear-gradient(#e70000, #e70000);
  background-position: 0 50%;
  background-size: 100% 6px;
  background-repeat: repeat-x;
  text-decoration: none;
  padding: 0 2px;
}