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

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

できますよー

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

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

まとめてみました。

See the Pen
【CSS】打ち消し線（delタグ）をカスタマイズする by 125naroom (@125naroom)
on CodePen.

打ち消し線の色を変える

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

See the Pen
【CSS】打ち消し線（delタグ）をカスタマイズする by 125naroom (@125naroom)
on CodePen.

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

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）の応用で作っています。
なんだかややこしそうですが数値と色をいろいろ変えてみると新たな発見があるかもしれません。

See the Pen
【CSS】打ち消し線（delタグ）の色を変える by 125naroom (@125naroom)
on CodePen.

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

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を調整してあげればオッケーです。

See the Pen
【CSS】打ち消し線（delタグ）を二重にする by 125naroom (@125naroom)
on CodePen.

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

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;
}

制作メモ

linear-gradientは、IEでも問題ないですね。（2021年8月現在）

Can I use

さいごに

わ、二重線になったー

やったー

関連記事

【CSS】背景（background）を2色にする

【CSS】しましま（縞模様）をつくる