CSS-通过（下方）SVG徽标图像添加细水平线

如何实现这样的水平线穿过SVG徽标图像（在它下面有lover z索引，因此它实际上在图像中不可见），但它不会接触侧面的图像，正如我们在这里看到的，图像每一侧的线和图像之间都有间隙。已尝试将图像的容器设置为相对，并在其上添加：：Prefore pseudoclass，将此细线设置为：

    &:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            border-top: 1px solid $whiteColor;
            width: 100%;
            transform: translateY(-50%);
        }

但它通过SVG徽标，并通过它可见。我想做到这一点：

---

尝试同时使用&:before和&:after伪类来实现这一点。 例如，您可以使用：

&:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        border-top: 1px solid $whiteColor;
        width: 40%;
        transform: translateY(-50%);
    }



&:after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            border-top: 1px solid $whiteColor;
            width: 40%;
            transform: translateY(-50%);
        }

不确定这个方法是否有效，只需复制您的示例并向您展示逻辑：）

这里有一个帮助链接-

在这里，我创建了一个简单的块，它是您的环绕。在里面你有一个盒子，盒子里有一个SVG

内容使用“显示柔体”在中心对齐高度和深度

然后使用“before”和“after”在svg的任一侧创建两行。这样你就不必担心试图制造差距等

这两行在框内，框是父对象（相对）

.街区{
宽度：100%；
高度：50px；
背景：#EA5E5D；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
填充：10px0；
}
.block.bar:：之前{
位置：绝对位置；
内容：''；
z指数：-1px；
高度：2倍；
宽度：45%；
左：10px；
最高：50%；
背景：白色；
}
.block.bar：：之后{
位置：绝对位置；
内容：''；
z指数：-1px；
高度：2倍；
宽度：45%；
右：10px；
最高：50%；
背景：白色；
}
.block.bar svg{
填充物：白色；
z指数：2；
}

<dv class="block">
<div class="bar">
    <a href="https://liamhooper.co.uk/" title="liamhooper.co.uk" target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 1000 1000">
      <rect width="250" height="1000"></rect>
      <rect id="Rectangle_1_copy" data-name="Rectangle 1 copy" x="750" width="250" height="1000"></rect>
      <rect x="500" y="250" width="500" height="250"></rect>
      <rect id="Rectangle_2_copy" data-name="Rectangle 2 copy" y="750" width="500" height="250"></rect>
    </svg>
    </a>
  </div>
  </div>

 .block{
  width:100%;
  height:50px;
  background:#EA5E5D;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:10px 0;
}
.block .bar::before{
  position:absolute;
  content:'';
  z-index:-1px;
  height:2px;
  width:45%;
  left:10px;
  top:50%;
  background:white;
}
.block .bar::after{
  position:absolute;
  content:'';
  z-index:-1px;
  height:2px;
  width:45%;
  right:10px;
  top:50%;
  background:white;
}
.block .bar svg{
  fill:white;
  z-index:2;
}