[分享]css中字的两边有横线

在CSS中，有一种让字的两边有横线的效果，就是可以利用伪元素 ::before 和 ::after 来实现。首先，我们需要为需要添加横线的文字设置样式：p { : relative; / 确保相对定位...

在CSS中，有一种让字的两边有横线的效果，就是可以利用伪元素

::before

和

::after

来实现。

首先，我们需要为需要添加横线的文字设置样式：

p {
  position: relative; /* 确保相对定位正常工作 */
}

p::before,
p::after {
  content: '; /* 一定要加上content，否则伪元素不会生效 */
  position: absolute; /* 相对于p元素定位 */
  bottom: 0; /* 将伪元素定位于文字下部 */
  width: 50%; /* 设置伪元素宽度，这里为文字容器的一半 */
  border-top: 1px solid black; /* 给伪元素添加1像素的上边框 */
} 

接下来，我们需要分别利用

::before

和

::after

添加横线。让左侧的横线从左侧开始，可以通过设置

::before

的

left

属性为0。同理，让右侧的横线从右侧开始，可以通过设置

::after

的

right

属性为0。

p::before {
  left: 0;
}

p::after {
  right: 0;
} 

这样，我们就成功实现了文字两侧有横线的效果。完整代码如下：

p {
  position: relative;
}

p::before,
p::after {
  content: ';
  position: absolute; 
  bottom: 0; 
  width: 50%; 
  border-top: 1px solid black; 
}

p::before {
  left: 0;
}

p::after {
  right: 0;
}