text-decoration-line - CSS（层叠样式表） 编辑

CSS 属性 text-decoration-line 用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便。

/* Keyword values */
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;               /* 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;

初始值	none
适用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性	否
计算值	as specified
Animation type	discrete

语法

值

text-decoration-line 属性可以设置为 none, 或者一个及多个用空格分隔的下列值。

none

表示没有文本修饰效果。

underline

在文本的下方有一条修饰线。

overline

在文本的上方有一条修饰线。

line-through

有一条贯穿文本中间的修饰线。

blink

文本闪烁（文本交替处于显示与隐藏状态）。客户代理都一致没有实现文本闪烁效果。考虑到为了支持使用 CSS 动画，该值也不宜使用。

格式化语法

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 text-decoration-line	Candidate Recommendation	初次定义。text-decoration 属性同时变成了定义多个相关属性的简写形式。

浏览器兼容性

BCD tables only load in the browser

 

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

 

另请参阅

• 当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便。