Bug using after pseudo-element on small screens

Question

Bug using after pseudo-element on small screens

Navigation

#1 by (1 votes)

1

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

Theproblemisinsmallerscreens,thesecondeffectintheadipiscingelittextwillsimplydisappear,dependingonthesizeofthetwo,asshownintheimagebelow:

CHANGE:ByanalyzingIrealizedthattheproblemisthewordbreakwiththeeffect,Isthereanywayaroundthis?

Belowisthecodeexample.

Toreproduce,simplyreducetheviewportofyourbrowser.

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

html5 css pseudo-elementos

asked by anonymous 09.10.2018 / 20:27

1 answer

score 1 · Accepted Answer

Your problem is that when the line breaks the pseudo element it loses the reference. I found two ways to solve it, but I do not know if it will be ideal for you.

Thefirstoneisclocandodisplay:inline-blockinspanandtheotherisalesseleganttechnique,using&nbspto"fill" the space between one word and another, and using the class in each of the words. ..

See how the behavior looks:

HereisthecodeIused:

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