文本装饰线 text-decoration

Docs

text-decoration - CSS | MDN (mozilla.org)

text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。

文本修饰属性会延伸到子元素。这意味着如果祖先元素指定了文本修饰属性，子元素则不能将其删除。

例如，在如下标记中 <p>This text has <em>some emphasized words</em> in it.</p>，应用样式 p { text-decoration: underline } 会对整个段落添加下划线，此时再添加样式 em { text-decoration: none } 则不会引起任何改变，整个段落仍然有下划线修饰。然而，新加样式 em { text-decoration: overline } 则会在 <em> 标记的文字上再添加上这种 overline 样式。

• text-decoration 用于设置文字的装饰线

  • decoration 是装饰/装饰品的意思;

• text-decoration 有如下常见取值：

  • none：无任何装饰线
    • 可以去除 a 元素默认的下划线
  • underline：下划线
  • overline：上划线
  • line-through：中划线（删除线）

• 元素有下划线的本质是被添加了 text-decoration 属性

• text-decoration-line：文本修饰的位置，如下划线underline，删除线line-through

• text-decoration-color：文本修饰的颜色

• text-decoration-style：文本修饰的样式，如波浪线wavy实线solid虚线dashed

• text-decoration-thickness：文本修饰线的粗细

html

<p class="under">这段文字下面有下划线。</p>
<p class="through">这段文字中间有删除线。</p>
<p class="over">这段文字上面有上划线。</p>
<p class="none">
  <a class="plain" href="#">使用 text-decoration: none; 时，链接的下划线也会消失。</a>
</p>
<p class="underOver">这段文字下面有下划线，上面有上划线。</p>
<p class="blink">这段文字会闪烁，但是不是所有浏览器都支持。</p>

css

.under {
  text-decoration: underline royalblue;
}

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

.over {
  text-decoration: wavy overline green;
}

.underOver {
  text-decoration: dashed underline overline;
}

.plain {
  text-decoration: none;
}

.blink {
  text-decoration: blink;
}

http://localhost:3000/text-decoration.html

这段文字下面有下划线。

这段文字中间有删除线。

这段文字上面有上划线。

使用 text-decoration: none; 时，链接的下划线也会消失。

这段文字下面有下划线，上面有上划线。

这段文字会闪烁，但是不是所有浏览器都支持。