css 中间文字两端线

CSS中间文字两端线是一种常见的排版效果，它可以让一行文字的两端对齐，同时在文字中间添加一条分隔线。实现这种效果在CSS中非常简单，可以通过在伪元素中使用background来实现。

p {
      position: relative;
}
p::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      height: 1px;
      width: 100%;
      background: #000;
      z-index: -1;
}
p::before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      right: 0;
      height: 1px;
      width: 100%;
      background: #000;
      z-index: -1;
}
    

首先为p标签设置position: relative属性，这是为了让伪元素的绝对定位相对于p标签。然后，使用::after伪元素来添加下划线，并设置其宽度和高度，以及顶部位置为50%。background属性用于设置下划线的颜色。

同样的，使用::before伪元素来添加上划线，并将其右侧对齐。要注意的一点是，两个伪元素必须设置z-index: -1属性，这是为了让它们在p标签中呈现背景的效果，不会遮盖文字。

使用CSS中间文字两端线的好处是，可以让页面更加美观大方，特别适用于标题、列表等区块的排版。同时，由于代码非常简单，适用于大多数前端开发者。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！