<div class="block">
...
</div>
.block {
position: relative;
}
.block::before {
content: normal;
}
.block::after{
content: normal;
}
.block:hover::before {
content: ''
}
.block:hover::after {
content: ''
}
.block::before {
position: absolute;
top: 0;
left: 0;
width: 0;
heigth: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1;
}
.block::after {
position: absolute;
background: url('icon.png');
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
<p id="underline-string">Почем<span>у</span> именно наши то<span>р</span>ты?</p>
#underline-string{
border-bottom: 1px solid #fff;
}
#underline-string > span{
border-bottom: none !important;
}