CSS - 通过（下方）SVG徽标图像添加细水平线[重复]答案

【问题标题】：CSS - add thin horizontal line through (underneath) SVG logo image [duplicate]CSS - 通过（下方）SVG徽标图像添加细水平线[重复]
【发布时间】：2021-04-16 08:39:26
【问题描述】：

如何实现这样的水平线穿过（在它下面有情人z-index，所以它实际上通过图像不可见）SVG标志图像，但它不会接触侧面的图像，正如我们可以看到的那样，有图像每一侧的线和图像之间的间隙。已经尝试将图像容器设置为相对并在其上添加 ::before 伪类，将此细线设置为：

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

但它通过 SVG 徽标并通过它可见。我想实现这个：

【问题讨论】：

标签： css line horizontal-scrolling strikethrough

【解决方案1】：

尝试使用 &: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%);
        }

不确定这个是否可行，只是复制了您的示例并想向您展示逻辑:)

【讨论】：

【解决方案2】：

这是一个帮助链接 - https://codepen.io/liam88/pen/bGgKzBq

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

内容使用 display flex 在中心对齐高度和深度。

然后使用“之前”和“之后”在 svg 的两侧创建两条线。这样您就不必担心试图造成差距等。

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

<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;
}

【讨论】：