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



いろんなパターンを実装してみる
簡単に<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月現在)
さいごに


関連記事
おすすめ
かんれん
- web / 2019.1.22
- 【CSS】三角アイコンと矢印アイコンをつくる
- web / 2018.8.29
- 【CSS】px(ピクセル)とem(エム)
- web / 2020.3.19
- 【CSS】スマホ、タブレットで横スクロールする実装サンプル集
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.10.02New
- Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.07.31
- 【Google Chrome】ショートカットキーまとめ(Windows or Mac)
- クロームでF5(更新)ってどうするんでしたっけ? あー、Macですか?わかるわかる、な…
- 125naroom / デザインするところ(会社)です。