text-decoration-line
CSS
property sets the kind of decoration that is used on text in an element, such as an underline or overline.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
When setting multiple line-decoration properties at once, it may be more convenient to use the
text-decoration
shorthand property instead.
/* Single keyword */ text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: blink; /* Multiple keywords */ text-decoration-line: underline overline; /* Two decoration lines */ text-decoration-line: overline underline line-through; /* Multiple decoration lines */ /* Global values */ text-decoration-line: inherit; text-decoration-line: initial; text-decoration-line: unset;
text-decoration-line
property is specified as
none
，或
one or more
space-separated values from the list below.
none
Produces no text decoration.
underline
Each line of text has a decorative line beneath it.
overline
Each line of text has a decorative line above it.
line-through
Each line of text has a decorative line going through its middle.
blink
| 初始值 |
none
|
|---|---|
| 适用于 |
所有元素。它还适用于
::first-letter
and
::first-line
.
|
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error
<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
The definition of 'text-decoration-line' in that specification. |
候选推荐 |
Initial definition. The
text-decoration
property is now a shorthand to define multiple related properties.
|
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-decoration-line
|
Chrome 完整支持 57 | Edge 完整支持 79 |
Firefox
完整支持
36
|
IE 不支持 No | Opera 完整支持 44 | Safari 完整支持 12.1 | WebView Android 完整支持 57 | Chrome Android 完整支持 57 |
Firefox Android
完整支持
36
|
Opera Android 完整支持 43 | Safari iOS 完整支持 12.2 | Samsung Internet Android 完整支持 7.0 |
blink
弃用
|
Chrome
完整支持
57
注意事项
|
Edge
完整支持
79
注意事项
|
Firefox
完整支持
26
注意事项
|
IE 不支持 No | Opera 完整支持 44 | Safari 完整支持 8 |
WebView Android
完整支持
57
注意事项
|
Chrome Android
完整支持
57
注意事项
|
Firefox Android
完整支持
26
注意事项
|
Opera Android 完整支持 43 | Safari iOS 完整支持 8 |
Samsung Internet Android
完整支持
7.0
注意事项
|
完整支持
不支持
弃用。不要用于新网站。
见实现注意事项。
要求使用供应商前缀或不同名称。
text-decoration
shorthand property instead.