text-decoration-line

text-decoration-line CSS 属性设置元素中文本使用的装饰类型，例如下划线或上划线。

试一试

当同时设置多个行装饰属性时，使用 text-decoration 简写属性可能更方便。

语法

css
/* 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: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;

text-decoration-line 属性指定为 none，或以下列表中的 **一个或多个** 用空格分隔的值。

值

none

不产生任何文本装饰。

underline

每行文本下方都有一条装饰线。

overline

每行文本上方都有一条装饰线。

line-through

每行文本中间都有一条装饰线。

文本闪烁（在可见和不可见之间交替）。符合标准的用户代理可能不会闪烁文本。此值 **已弃用**，建议使用 CSS 动画。

正式定义

初始值none
应用于所有元素。它也应用于 ::first-letter 和 ::first-line。
继承否
计算值按指定
动画类型离散

正式语法

text-decoration-line = 
  none                                                |
  [ underline || overline || line-through || blink ]

示例

基本示例

html
<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>
css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}

规范

规范
CSS 文本装饰模块级别 3
# text-decoration-line-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见