CSS テキスト装飾
CSS テキスト装飾は CSS のモジュールの一つで、下線、テキストの影、圏点など、テキスト装飾に関連する機能を定義します。
リファレンス
プロパティ
letter-spacing
text-align
text-decoration
text-decoration-color
text-decoration-line
text-decoration-offset
text-decoration-skip-ink
text-decoration-style
text-decoration-thickness
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-rendering
text-shadow
text-transform
white-space
word-spacing
ガイド
なし。
例
.under {
text-decoration: underline red;
}
.over {
text-decoration: wavy overline lime;
}
.line {
text-decoration: line-through;
}
.plain {
text-decoration: none;
}
.underover {
text-decoration: dashed underline overline;
}
.thick {
text-decoration: solid underline purple 4px;
}
.blink {
text-decoration: blink;
}
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>This <a class="plain" href="#">link will not be underlined</a>,
as links generally are by default. Be careful when removing
the text decoration on anchors since users often depend on
the underline to denote hyperlinks.</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">This text has a really thick purple underline in supporting browsers.</p>
<p class="blink">This text might blink for you,
depending on the browser you use.</p>
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Text Decoration Module Level 4 | 草案 | |
CSS Text Decoration Module Level 3 | 勧告候補 | |
CSS Level 2 (Revision 1) | 勧告 | |
CSS Level 1 | 勧告 | 初回定義 |