delの打ち消し線をCSSで斜線にする方法

CSS

2017年11月15日2021年05月13日

例えばECサイトなどで割引の表示をするときに
元の価格に打ち消し線を引くことがあります。

HTML5では、打ち消しのタグはdelが推奨されています。
delはデフォルトCSSで


del{
    text-decoration: line-through;
}

del{

text-decoration: line-through;

}

が設定されており、

標準価格
2,980円

このような打ち消し線が表示されます。

これをもうちょっといい感じにしてみます。


del{
    text-decoration: none;/* デフォルトCSSの打ち消し */
    background: linear-gradient(9deg, transparent, transparent 50%, #f00 50%, #f00 53%, transparent 53%, transparent);
    /* linear-gradientで角度をつけて、斜線のように見せる */
}

del{

text-decoration: none;/* デフォルトCSSの打ち消し */

background: linear-gradient(9deg, transparent, transparent 50%, #f00 50%, #f00 53%, transparent 53%, transparent);

/* linear-gradientで角度をつけて、斜線のように見せる */

}

すると

標準価格
2,980円

赤い斜線が引かれ、視覚的にぐっとわかりやすくなります。
数値は適宜調整してください。