如何不在 CSS 中的链接下划线

在前端开发中，链接下划线是一种常见的样式。但是有时候我们需要去除它，或者修改它的样式。那么该如何做呢？本文将介绍几种方法来实现在 CSS 中控制链接下划线的样式。

1. 使用 text-decoration 属性

CSS 中的 text-decoration 属性可以用来控制链接的样式，包括下划线。

去除下划线

要去除链接下划线，可以设置 text-decoration 为 none。

a {
  text-decoration: none;
}

修改下划线颜色

要修改下划线的颜色，可以使用 text-decoration-color 属性。

a {
  text-decoration: underline;
  text-decoration-color: red;
}

去除下划线但保留 hover 状态下划线

有时候我们不想在链接中显示下划线，但是希望在鼠标悬停时显示下划线。那么该如何实现呢？

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

2. 使用 border-bottom 属性

CSS 中的 border-bottom 属性可以用来控制链接下划线的样式。这种方法比 text-decoration 更加灵活，因为它可以灵活地控制下划线的样式。

通过 border-bottom 去除下划线

a {
  border-bottom: none;
}

修改下划线样式

a {
  border-bottom: 1px solid red;
}

去除下划线但保留 hover 状态下划线

a {
  border-bottom: none;
}
a:hover {
  border-bottom: 1px solid red;
}

3. 使用 ::after 伪类

我们还可以使用 ::after 伪类来实现链接下划线的样式。这种方式通常使用在需要自定义下划线样式的情况下。

a {
  position: relative;
}
a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  background-color: red;
}

小结

在 CSS 中控制链接下划线的样式有多种方式，包括使用 text-decoration 属性、border-bottom 属性和 ::after 伪类。根据需求选择不同的方式可以使样式更加灵活和自定义化。