CSS text-decoration-line 属性

CSS text-decoration-line

CSS text-decoration-line 属性规定添加到文本的一条或多条上装饰线。

语法

text-decoration-line: none|underline|overline|line-through|initial|inherit;

值	描述
none	默认值。不添加上装饰线。
underline	添加下划线。
overline	添加上划线。
line-through	添加穿越线（删除线）。
initial	将属性设置为其默认值。查看CSS initial
inherit	从父元素继承text-decoration-line属性值。

示例

p {
  text-decoration-line: underline;
}

h1 {
  text-decoration-line: line-through;
}

a {
  text-decoration-line: none; /* 取消链接下划线 */
}

多条装饰线

通过使用text-decoration 属性的缩写，可以同时添加多条装饰线。

h1 {
  text-decoration: underline overline line-through;
  /* 等效于以下3行 */
  /* text-decoration-line: underline; */
  /* text-decoration-line: overline; */
  /* text-decoration-line: line-through; */
}

其他注意事项

继承

text-decoration属性会被继承。

单词间距离问题

当使用text-decoration-line添加下划线时，由于下划线的高度往往会压缩文本其下面的线宽会和上下单词的距离相等，会出现单词间距离较大的问题。

解决方法是通过增加下划线与文字的间距。

p {
  text-decoration-line: underline;
  text-underline-position: under;
  text-underline-offset: 3px;
}

结论

text-decoration-line属性可用于添加一些常用的装饰线（如下划线、上划线、穿越线）到文本中，同时可以与其他属性一起使用，例如调整单词间距、修改线条颜色等。需要注意的是，使用时需要细心，避免出现单词间距离过大的情况。

CSS text-decoration-color 属性 CSS text-decoration-style 属性