[分享]css两行文字之间添加横线

今天我们来学习一下如何在CSS中实现两行文字之间添加横线的效果。这是一个比较简单的效果，但却很常用。 在CSS中，我们可以使用伪元素::after来实现这个效果。具体的代码如下： p { : rela...

今天我们来学习一下如何在CSS中实现两行文字之间添加横线的效果。这是一个比较简单的效果，但却很常用。
在CSS中，我们可以使用伪元素::after来实现这个效果。具体的代码如下：

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

首先，我们需要将p标签的position属性设为relative，这是为了让伪元素::after的position属性相对于它进行定位。然后，我们使用::after创建一个空白的块级元素，并设置它的position属性为absolute，left和bottom属性为0，这是为了让它占据p标签的整个底部。
接下来的width属性设置为100%，这是为了让它横跨整个p标签，height属性设置为1px，这是横线的高度。最后的background-color属性用来设置横线的颜色，可以根据需求进行修改。
以上就是实现在CSS中添加横线的全部代码。我们可以将它应用到需要的地方，如文章标题下方、段落之间等等。
总结一下，使用伪元素::after可以很方便地实现CSS中的两行文字之间添加横线的效果。希望对大家有所帮助。