向文本添加修饰线 text-decoration-line

text-decoration-line属性用于添加文本的装饰行。

h1 {
  text-decoration-line: overline;
}

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

h3 {
  text-decoration-line: underline;
}

p {
  text-decoration-line: overline underline;
}

不建议为非链接的文本添加下划线，因为这通常会使读者感到困惑。

指定装饰线的颜色 text-decoration-color

h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

指定装饰线的样式 text-decoration-style

text-decoration-style属性用于设置装饰线的样式。

h1 { text-decoration-line: underline;
  text-decoration-style: solid; }

h2 { text-decoration-line: underline;
  text-decoration-style: double; }

h3 { text-decoration-line: underline;
  text-decoration-style: dotted; }

p.ex1 { text-decoration-line: underline;
  text-decoration-style: dashed; }

p.ex2 { text-decoration-line: underline;
  text-decoration-style: wavy; }

p.ex3 { text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy; }

指定装饰线的粗细 text-decoration-thickness

h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

简写属性 text-decoration

text-decoration属性是简写属性：

• text-decoration-line（必填）
• text-decoration-color（可选）
• text-decoration-style（可选）
• text-decoration-thickness（可选）
  

默认情况下，HTML 中的所有链接都带有下划线。有时你 看到链接的样式没有下划线。text-decoration: none;用于删除链接的下划线，

a {
  text-decoration: none;
}