文字装饰-线 | text-decoration-line

该text-decoration-line CSS属性设置的是一种应用在元素的文本上的装饰。当一次设置多个线条装饰属性时，使用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;

语法

可能值

该text-decoration-line属性被指定为none，或者从下面的列表中指定一个或多个以空格分隔的值。

none——不产生文字装饰。

underline——每行文字的下方都有一条装饰线。

overline——每行文字上方都有一条装饰线。

line-through—每一行文字都有一条贯穿其中的装饰线。

blink——文字闪烁（在可见和不可见之间交替）。此值不鼓励使用 CSS动画。

形式语法

none | [ underline || overline || line-through || blink ]

实例

<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;
}

规范

浏览器兼容性