Bug when using pseudo-element after on small screens

Question

Hello, a curious bug appeared when I tried to make a text with this effect:

The problem is in smaller screens, the second effect in the text "adipiscing Elit!" simply add up, depending on the size the two disappear, as shown in the image below:

AMENDING: Analyzing I realized that the problem is breaking the word with the effect, Is there any way around this?

Below is the example of the code.

To play just decrease the viewport of your browser.

.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>

Answer 1

Its problem is that when the line breaks the pseudo element loses the reference. I found two ways to solve it, but I don’t know if it’s gonna be right for you.

The first is clocando display:inline-block in the span and the other is a less elegant technique, using a &nbsp to "fill" the space between a word and another, and using the class in each of the words...

See how the behavior looks:

Follow the code I used:

.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" style="display:inline-block;">
    adipiscing elit!
  </span>
  </p>
  <p class="color-primary">
  Consectetur, 
  <span class="featured-text">
    adipiscing</span><span class="featured-text">
      &nbsp</span><span class="featured-text"> elit!
  </span>
  </p>
</div>