HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

テキスト デコレーション ライン

text-decoration-lineプロパティ

テキストの上下、または中央に線を引くためのプロパティです。

  • 初期値

    none

  • 継承

    不可

  • 適用できる要素

    全要素

次の値を指定することができます。
2016年8月現在、Chrome、Opera、InternetExploereには対応していません。
Safariに適用する場合はベンダープレフィックス「-webkit-」を付ける必要があります。

  • none – 線なし
  • underline – テキストの下に線を引く
  • overline – テキストの上に線を引く
  • line-through – テキストの中央に線を表示
  • blink – 線の表示、非表示を繰り返し点滅。現在はほとんどのブラウザで未対応。
  • -moz-anchor-decoration – firefoxのみのプロパティ。アンカーとして装飾。見た目は「underline」と同一。

パターン1

それぞれの値を指定した例です。

CSSコード例

<style type="text/css">
.text1 {
	text-decoration-line: underline;
	-webkit-text-decoration-line: underline;
}
.text2 {
	text-decoration-line: overline;
	-webkit-text-decoration-line: overline;
}
.text3 {
	text-decoration-line: line-through;
	-webkit-text-decoration-line: line-through;
}
.text4 {
	text-decoration-line: -moz-anchor-decoration;
}
</style>
<p class="text1">プロパティのテスト</p>
<p class="text2">プロパティのテスト</p>
<p class="text3">プロパティのテスト</p>
<p class="text4">プロパティのテスト</p>

表示例:

text-decoration-lineプロパティの適用例

パターン2

値を「 (半角スペース)」で区切ることで複数指定することも可能です。

CSSコード例

<style type="text/css">
.text {
	text-decoration-line: underline overline line-through;
	-webkit-text-decoration-line: underline overline line-through;
}
</style>
<p class="text1">プロパティのテスト</p>

表示例:

text-decoration-lineプロパティで複数の値を指定した例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。