“text-decoration-thickness”プロパティ:テキストに引く線の太さ

概要

“text-decoration-thickness”プロパティは“text-decoration-line”プロパティでテキストに引く下線、上線、打ち消し線の太さを指定するプロパティです。

“text-decoration-thickness”プロパティは子要素に継承されませんが、それでも下線や上線、取り消し線は子孫のものも含むすべてのテキストに設定が反映されます。子孫要素に別途“text-decoration”プロパティや“text-decoration-thickness”プロパティを適用したとしても設定を上書きすることはできません。

サンプルコード

値

仕様書

定義されている仕様書

text-decoration-thickness

auto
from-font
<length>
<percentage>

キーワード値で指定する

span {

text-decoration-line: underline;
text-decoration-thickness: auto;

}

彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

span {

text-decoration-line: underline;
text-decoration-thickness: from-font;

}

彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

“<length>”値で指定する

span {

text-decoration-line: underline;
text-decoration-thickness: 3px;

}

彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

“<percentage>”値で指定する

span {

text-decoration-line: underline;
text-decoration-thickness: 10%;

}

彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。