s 打消し線の太さと色を変更 コピペで使えるHTML+CSS

スポンサーリンク

無効なテキストを指定するS要素は一般的なブラウザでは文字の中央に打消し線が引かれます。text-decorationを修正して線の種類や太さ、色を変更します。

スポンサーリンク

sの打消し線の色、太さを変更する

 打消し線は text-decoration: line-throughです。因みに、この部分を underline にすれば下線になります。ここでは線の種類をline-throughのままとし、太さを4px、直線のsolid、色を赤#ff0000に指定します。

20時まで営業しています 特別営業につき、23時まで営業中です。
style属性で記述
<s style="text-decoration: line-through 4px solid #ff0000;">20時まで営業しています</s> 特別営業につき、23時まで営業中です。
スタイルシートで記述
<s class="s-bold-red">20時まで営業しています</s> 特別営業につき、23時まで営業中です。
.s-bold-red{
    text-decoration: line-through 4px solid #ff0000;
}

対象要素の概要

s要素

s 無効なテキスト 打消し線 コピペで使えるHTML+CSS
不正確、又は間違った無効なテキスト指定するS要素。一般的なブラウザでは文字の中央に打消し線が引かれます。

使用するCSSの概要

text-decoration

text-decoration 文字に線を引く コピペで使えるHTML+CSS
文字にアンダーライン、打消し線、点線を引くtext-decorationプロパティ。実際に用意されている位置、スタイルについての値、全てを例示解説します。