text-decoration-style - 文字装飾にスタイルを付ける

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのtext-decoration-styleは、text-decorationで付けた文字の線のスタイルを指定するためのプロパティです。2016年2月現在、主要なブラウザではFirefox以外、サポートしていません。

サンプルコード

text-decoration-styleを指定したサンプルコードです。

div {
	text-decoration: underline ;
	text-decoration-style: dashed ;
}

text-decorationにunderlineを指定して付けた下線に、text-decoration-styleでdashedのスタイルを適用したデモです。CSSを編集して、どのように変化するのかをお試し下さい。

<div id="element"> <p>文字の装飾はこまめに。</p> </div>

#element { text-decoration: underline ; text-decoration-style: dashed ; }

指定できる値の説明は下記の通りです。リンクをクリックするとデモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`text-decoration-style`には、`body`に指定された値(`dashed`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、`solid`(一本線)が適用される。
solid	初期値。一本線。
double	二重線。
dotted	ドットスタイル。
dashed	短い線のスタイル。
wavy	波線のスタイル。

2016年7月現在の、ブラウザのサポート状況は次の通りです。