CSS の text-decoration-line
プロパティは、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
複数の line-decoration に関するプロパティを一度に設定するときは、代わりに一括指定の text-decoration
プロパティを使用したほうが便利かもしれません。
構文
/* 単一のキーワード */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
/* 複数のキーワード */
text-decoration-line: underline overline; /* 2つの装飾線 */
text-decoration-line: overline underline line-through; /* 複数の装飾線 */
/* グローバル値 */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: unset;
text-decoration-line
プロパティは none
または以下のリストにある1つ以上の空白で区切られた値を指定します。
値
none
- テキストの装飾を行いません。
underline
- テキストの各行に下線を引きます。
overline
- テキストの各行の上線を引きます。
line-through
- テキストの各行の中央を貫く線を引きます。
blink
- テキストが点滅します (表示と非表示を交互に繰り返します)。準拠するユーザーエージェントはテキストを点滅させないかもしれません。この値は非推奨であり、 CSS アニメーションに取って代わりました。
形式文法
例
<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>
.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
.both {
text-decoration-line: underline overline;
}
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Text Decoration Module Level 3 text-decoration-line の定義 |
勧告候補 | 初回定義。 text-decoration プロパティが複数の関連するプロパティを定義する一括指定になりました。 |
初期値 | none |
---|---|
適用対象 | すべての要素。 ::first-letter and ::first-line にも適用されます。 |
継承 | なし |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の
text-decoration
プロパティを使った方が便利かもしれません。