[分享]css两边加横线

在网页设计中，常常需要给一些文本加上横线来突出重点，这时候，我们可以使用CSS的textdecoration属性来实现。首先，我们可以使用textdecoration属性来给文本添加下划线：p { t...

在网页设计中，常常需要给一些文本加上横线来突出重点，这时候，我们可以使用CSS的text-decoration属性来实现。

首先，我们可以使用text-decoration属性来给文本添加下划线：

p {
  text-decoration: underline;
} 

这样，页面中的所有段落都会有下划线。

接下来，我们可以使用伪元素::before和::after来给文本增加左右两边的横线：

p {
  position: relative;
}

p::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid #ccc;
}

p::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-bottom: 1px solid #ccc;
} 

这里，我们将p元素的position属性设为relative，然后使用伪元素::before和::after来添加上下边框，通过绝对定位将它们放在文本的上下两侧。

这样，我们就可以把一段文本用两条横线夹在中间来进行标识了。