CSS - add thin horizontal line through (underneath) SVG logo image

Question

How to achieve such horizontal line going through (under it with lover z-index so its not visible actually through image) SVG logo image but so that it doesn't touch image on sides, as we can se here, there is gap between line and image on each side of image. Tried already setting container of image as relative and adding ::before pseudoclass on it, setting this thin line as:

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

but it goes through SVG logo and is visible through it. I want to achieve this:

Answer 1

Try to achieve this using both &:before and &:after pseudoclass. You can for example use:

&: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%);
        }

Not sure if this one will work, just copied your example and want to show you the logic :)

Answer 2

Here is a link to help - https://codepen.io/liam88/pen/bGgKzBq

In here I created a simple block which is your surround. Inside you then have a box and inside the box an SVG.

The content is using display flex to align height and deth in the center.

Then using "before" and "after" to create two lines either side of the svg. That way you don't have to worry about trying to create a gap etc.

The two lines are within the box with box being the parent (relative).

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