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

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

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

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

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

制作メモ

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

さいごに

わ、二重線になったー
やったー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

6

/

22

2024

Googleさんの
おすすめ

6

/

22

2024

デザインの記事

EHON HOTEL
  • 2024.06.21New
  • EHON HOTEL
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】ページ内リンクでスムーズスクロール(固定ヘッダーがあったら)