[分享]css下划线样式 实线

在 CSS 样式表中，我们可以通过 textdecoration 属性来设置下划线的样式。其中，下划线的样式可以分为实线、虚线、双实线、点线等多种。.text { textdecoration: un...

在 CSS 样式表中，我们可以通过 text-decoration 属性来设置下划线的样式。其中，下划线的样式可以分为实线、虚线、双实线、点线等多种。

.text {
  text-decoration: underline;
} 

上面的代码会在文本下方添加一条实线下划线。

此外，我们还可以通过 text-decoration-style 属性来定义下划线的样式类型。该属性的可选值有 solid、double、dotted、dashed、wavy 等类型。

.text {
  text-decoration-style: solid;
} 

上述代码将把下划线样式改成实线类型。

CSS 还提供了以下几个属性，可以进一步对下划线进行定制。

• text-underline-position：用于定义下划线的位置，默认是位于文本下方。可以设置为“above”（文本上方）、“auto”（根据文本字体自适应位置）等。
• text-decoration-thickness：用于定义下划线的粗细程度。
• text-decoration-color：用于定义下划线颜色。

通过这些属性，我们可以实现更加丰富的下划线效果。

.text {
  text-decoration: underline;
  text-decoration-style: double;
  text-decoration-color: red;
  text-underline-position: above;
  text-decoration-thickness: 2px;
} 

上述代码实现了“双下划线、红色、位于文本上方、粗款”的效果。

除了在文本中添加下划线，我们还可以使用伪元素 ::before 和 ::after 为块级元素添加下划线。

.text::after {
  content: "";
  display: block;
  border-bottom: 1px solid black;
  width: 50%;
  margin: 10px auto 0 auto;
} 

上述代码会在 .text 元素的下方添加一条宽度为 50% 的实线下划线。

总之，CSS 为下划线样式的定义提供了许多可供选择的属性和取值，我们可以按照实际需求进行灵活组合。通过下划线的应用，我们可以使得页面文本更加美观、清晰。