css 中间字两边横线

CSS中间字两边横线指的是一个常用的CSS样式效果，即在字体中间加上一条横线，用于强调或区分某些文字。

要实现这个效果，我们可以使用CSS中的text-decoration和background属性。先看一下text-decoration，我们可以通过设置text-decoration为line-through，来给字体中间加上一条横线：

p {
      text-decoration: line-through;
}

但是这样只有一条横线，并不符合我们的要求。所以我们需要使用background属性来添加另一条横线。具体步骤如下：

p {
      display: inline-block;
     /* 将p元素设为块级元素 */  position: relative;
 /* 设为相对定位 */}
p::before,p::after {
      content: "";
     /* 添加伪元素 */  position: absolute;
     /* 将伪元素设为绝对定位 */  left: 0;
      width: 100%;
     /* 伪元素宽度为100% */  height: 1px;
     /* 伪元素高度为1像素 */  background: #000;
 /* 给伪元素设置背景颜色 */}
p::before {
      top: 50%;
     /* 设置上横线的位置 */  transform: translateY(-50%);
 /* 将横线向上移动50% */}
p::after {
      bottom: 50%;
     /* 设置下横线的位置 */  transform: translateY(50%);
 /* 将横线向下移动50% */}
    

通过这样的设置，我们就可以实现中间字两边横线的效果了。

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