/* I have the following CSS. */
.top-header-one {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
height: 26px;
width: 96px;
display: inline-block;
}
.top-header-one:hover {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}
.top-header-two {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
height: 26px;
width: 96px;
display: inline-block;
}
.top-header-two:hover {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}
.top-header-three {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
height: 26px;
width: 96px;
display: inline-block;
}
.top-header-three:hover {
background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}
.top-custom-link ul li {
display: inline-block;
}
.top-custom-link ul li:not(:first-child):before {
content: "|";
}
<!-- And the following HTML. -->
<div class="top-custom-link">
<ul>
<li>
<a href="#"> <span class="top-header-one"> </span></a>
</li>
<li>
<a href="#"> <span class="top-header-two"> </span></a>
</li>
<li>
<a href="#"> <span class="top-header-three"> </span></a>
</li>
</ul>
</div>
I am not able to align pipes with background images.
Here is the jsfiddle https://jsfiddle.net/L7ob2zfp/