打ち消し線のCSS

2024年10月21日2024年12月28日

こんにちは。TOMOデザインです。

今回は打ち消し線のCSSをご紹介します。

同じ色で打ち消しする場合

CSS

p.utikeshi { text-decoration: line-through; }

HTML

<p class="utikeshi">この文字は打ち消しされます。</p>

↓実例

この文字は打ち消しされます。

線と文字の色を違う場合の方法です。

CSS

p.utikeshi-color { text-decoration: line-through 1px solid red; }

HTML

<p class="utikeshi-color">文字と打ち消し線は違う色です。</p>

↓実例

この文字は打ち消しされます。

CSS

p.utikeshi-color2 { text-decoration: line-through 1px solid #000; color: #ffa07a;}

HTML

<p class="utikeshi-color2">文字と打ち消し線は違う色です。</p>

↓実例

この文字は打ち消しされます。

CSS

p.utikeshi-color3 { text-decoration: line-through 3px solid red; }

HTML

<p class="utikeshi-color3">文字と打ち消し線は違う色です。</p>

↓実例

この文字は打ち消しされます。

打ち消し線は、通常価格とセール価格の違いを強調させる際や、古い情報の訂正などで活用できます。

ご参考までに！

よかったらシェアしてね！