css上顶线下划线

CSS上顶线和下划线是两种常见的文本修饰方式。上顶线用于将文本的顶部与外边框对齐，下划线则是在文本下方添加一条横线。下面我们来具体了解如何使用CSS实现这两种修饰效果。

/* 上顶线样式 */
.top-line {
  border-top: 1px solid black;
  padding-top: 5px;
}

/* 下划线样式 */
.bottom-line {
  border-bottom: 1px solid black;
  padding-bottom: 5px;
} 

上面的CSS代码中，我们使用了border-top属性和padding-top属性实现上顶线的效果。其中，border-top用于设定上边框的样式，这里我们使用了1像素的实线，颜色为黑色。padding-top用于设定文本与上边框之间的距离，这里我们给定了5像素的间距。

下划线的实现方式与上顶线类似，我们使用了border-bottom属性和padding-bottom属性。border-bottom用于设定底部边框的样式，padding-bottom用于设定文本与下边框之间的距离。

需要注意的是，在使用上顶线和下划线时，我们一般会将其应用到某个块级元素（如p、h1等），而非行内元素（如span、a等）。这是因为块级元素能够自动换行，能够更好地适应不同尺寸的屏幕。