Olá, um bug curioso apareceu quando tentei fazer um texto com esse efeito:
O problema é em telas menores, o segundo efeito no texto "adipiscing elit!" simplesmente some, dependendo do tamanho os dois somem, como mostrado na imagem abaixo:
ALTERAÇÃO: Análisando eu percebi que o problema é a quebra da palavra com o efeito, Será que existe alguma maneira de contornar isto?
Abaixo vai o exemplo do código.
Para reproduzir basta diminuir a viewport do seu navegador.
.color-primary {
color: #225cbe;
}
.featured-text {
position: relative;
font-weight: 900;
}
.featured-text:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 35%;
background-color: #fdd104;
z-index: -10;
}
<div class="main-title">
<p class="color-primary ">
<span class="featured-text">
Lorem Ipsum,
</span> dolor amit.
</p>
<p class="color-primary">
Consectetur,
<span class="featured-text">
adipiscing elit!
</span>
</p>
</div>