text-decoration-line - 文字の装飾をまとめて指定する

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

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

サンプルコード

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

div {
	text-decoration: underline ;
}

text-decoration-lineにunderline overline line-throughを指定して、文字に下線と上線と訂正線を一緒に付けたデモです。CSSを編集して、どのように変化するのかをお試し下さい。

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

#element { text-decoration-line: overline line-through underline ; }

値は、underline、overline、line-throughを、半角スペース( )で区切って複数指定できます。順番に制限はありません。値の説明は下記の通りです。リンクをクリックするとデモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`text-decoration-line`には、`body`に指定された値(`overline line-through underline`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、`none`(装飾なし)が適用される。
none	初期値。文字装飾されない。
underline	下線が付く。
overline	上線が付く。
line-through	訂正線が付く。

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