css下划线怎么解决

在HTML页面中，如果需要给文本加上下划线，一般会使用CSS样式来实现。但是，在某些情况下，使用CSS下划线会出现一些问题，如下划线跑到了文本下方的情况。下面我们介绍几种解决方案。

方案一：使用border-bottom

p {
  border-bottom: 1px solid #000;
} 

这种方法是给文本下方添加一个边框，相当于加一个下划线，可以避免下划线跑到文本下方的问题。不过这种方式下划线的粗细和颜色也会受到边框的影响。

方案二：使用绝对定位

p {
  position: relative;
}

p::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
} 

这种方法是通过绝对定位添加一个伪元素来模拟下划线，可以解决下划线跑到文本下方的问题。同时可以通过修改伪元素的颜色和粗细来设置下划线的样式。

方案三：使用text-decoration

p {
  text-decoration: underline;
} 

这种方法是直接使用text-decoration属性来添加下划线，但是可能会出现下划线跑到文本下方的问题。可以通过给父元素设置line-height属性来解决这个问题。

综上，以上三种方法都可以解决CSS下划线的问题。具体使用哪种方法，可以根据实际情况灵活选择。