[分享]css下划线样式代码

CSS下划线是一种非常常见的样式，可以用于各种文本元素，比如链接、标题等等。在CSS中，我们可以使用textdecoration属性来设置文字的下划线样式，常见的值有：none（无下划线）、under...

CSS下划线是一种非常常见的样式，可以用于各种文本元素，比如链接、标题等等。在CSS中，我们可以使用text-decoration属性来设置文字的下划线样式，常见的值有：none（无下划线）、underline（下划线）、overline（上划线）和line-through（删除线）。

/* 下划线样式 */
.text-underline {
  text-decoration: underline;
} 

除了默认的下划线外，我们还可以自定义下划线的样式，比如颜色、线宽、边距等等。下面是一个示例代码：

/* 自定义下划线样式 */
.text-custom-underline {
  text-decoration: none;
  border-bottom: 2px solid red;
  padding-bottom: 5px;
  margin-bottom: 10px;
} 

在上面的代码中，我们先将text-decoration属性设置为none，这是为了去掉默认的下划线样式。然后使用border-bottom属性来定义下划线样式，这里我们选择了一个2像素宽的红色实线作为下划线。接着使用padding-bottom属性设置文字和下划线之间的距离，最后使用margin-bottom属性设置文字和下面的元素之间的距离。

下划线样式不仅可以用于单个文本元素，还可以用于一组元素的链接，在这种情况下，我们可以使用CSS的伪类选择器来设置样式：

/* 链接下划线样式 */
a:link {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  text-decoration: underline;
} 

在上面的代码中，我们使用a:link选择器来去掉链接的默认下划线样式，使用a:hover和a:visited选择器来设置鼠标悬停和访问之后的下划线样式。