如何不使用hr标签，通过CSS伪类在p标签下添加两条占满容器宽度的横线

直接给p标签添加伪元素即可实现效果，不需要新增额外DOM节点，也不用hr标签。

完整代码 #

CSS #

.test {
  max-width: 320px;
  width: 100%;
  border: 1px solid black;
  /* 给底部预留横线空间，避免和容器外内容重叠 */
  padding-bottom: 24px;
}
.test p {
  /* 清除p标签默认边距，避免间距计算偏差 */
  margin: 0;
  /* 作为伪元素的定位基准 */
  position: relative;
}
.test p::after {
  content: "";
  position: absolute;
  /* 左右设为0，直接占满父容器.test的100%宽度 */
  left: 0;
  right: 0;
  /* 调整p标签底部到第一条横线的距离 */
  top: calc(100% + 8px);
  /* 两条横线之间的间距 */
  height: 4px;
  /* 上下边框就是两条横线，可自行修改颜色、粗细 */
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
}

HTML #

<div class="test">
  <p>Test</p>
</div>

调整说明 #

• 要修改横线粗细：调整border-top和border-bottom的第二个参数
• 要修改横线颜色：调整border-top和border-bottom的第三个参数
• 要修改两条横线的间距：调整height属性的数值
• 要修改p文字和横线的距离：调整top属性里calc的第二个数值
• 如果你的p标签设置了左右内边距，只需要把left设为负的左内边距数值，right设为负的右内边距数值，就能保证横线依然占满整个父容器宽度。

替代方案（双伪元素实现） #

如果需要两条横线的样式不一样（比如粗细、颜色不同），可以用两个伪元素分别实现：

/* 第一条线 */
.test p::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  height: 1px;
  background: #222;
}
/* 第二条线 */
.test p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 14px);
  height: 2px;
  background: #666;
}

内容的提问来源于stack exchange，提问作者Dave