一般的に多くのブラウザにおいて、delは文字の中央に打消し線を表示します。CSSのtext-decorationプロパティを修正することによって線の太さ、色、種類を変更します。text-decorationには破線、二重線、波線などが用意されています。
delの打消し線の色、太さ、種類を変更する
打消し線は text-decoration: line-throughです。ここでは赤い破線に変更します。具体的には、太さを4px、破線のdashed、色を赤#ff0000に指定します。
style属性で記述
<del style="text-decoration: line-through 4px dashed #ff0000;">20時まで営業しています</del> 23時まで営業しています。
スタイルシートで記述
<del class="del-bold-dotted-red">20時まで営業しています</del> 23時まで営業しています。
.del-bold-dotted-red{ text-decoration: line-through 4px dashed #ff0000; }
対象要素の概要
del
del 削除されたテキスト 打消し線 コピペで使えるHTML+CSS
削除対象のテキストを示すdel要素、及びcite属性とdatetime属性について解説。
使用するCSSの概要
text-decoration
text-decoration 文字に線を引く コピペで使えるHTML+CSS
文字にアンダーライン、打消し線、点線を引くtext-decorationプロパティ。実際に用意されている位置、スタイルについての値、全てを例示解説します。