css上顶线 下划线

在开发网页时，我们经常需要调整文本的显示效果。其中一个常见的需求就是在文本下方添加一个下划线或在文本上方添加一个顶线。

这时，CSS中就有两个属性可以使用：text-decoration和border-bottom。其中text-decoration属性是用于添加顶线、下划线、删除线等文本修饰的。border-bottom属性是用于添加元素底边缘线条的。

如果我们想为文本添加下划线，可以通过以下的代码实现：

p {
  text-decoration: underline;
}

如果我们想为文本添加顶线，可以使用以下代码：

p {
  border-bottom: 1px solid black;
}

在这个示例中，我们把边框底部的宽度设置为“1px”，样式设置为“solid”，颜色为“黑色”。这样就能在段落下方添加一条边框线，从而实现顶线的效果。

但需要注意的是，如果我们在网页开发过程中需要添加大量的顶线或下划线，应该避免使用text-decoration属性，因为这个属性会影响文本的其他样式，如字体颜色、背景色等。此时，最好使用border-bottom属性来实现所需的效果，并且可以通过设置样式类来减少重复的代码，提高效率。