125naroom / デザインするところ(会社)です。

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

【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.

コードはこちら

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

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

コードはこちら

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

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

コードはこちら

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

制作メモ

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

Can I use

さいごに

きのこさん
わ、二重線になったー
きのこさん
やったー

関連記事

【CSS】背景(background)を2色にする

【CSS】しましま(縞模様)をつくる

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
ちょっと思い出しただけ
【Google Chrome】ショートカットキーまとめ(Windows or Mac)