Search code examples
htmlcssbackground-colorelementor

Yellow underline CSS randomly not applied to full width of span

Example: https://flowster.app/flowster-affiliate-program-activation-bonus/

You can see that the yellow underline (highlight) only makes it as far as the "A", but it should be underneath "Flowster Affiliate Program": enter image description here

However, the HTML looks like this:

<h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster Affiliate Program</span> -
  Activation Bonus
</h1>

And the yellowhighlight CSS class looks like:

span.yellowhighlight {
  position: relative;
  z-index: 0;
}

span.yellowhighlight::after {
  content: "";
  position: absolute;
  left: -0.15em;
  right: -0.15em;
  top: 0.8em;
  height: 0.4em;
  border-radius: 2em;
  background: #fffa50;
  z-index: -1;
}

It's odd because on other pages it looks proper.

span.yellowhighlight {
  position: relative;
  z-index: 0;
}

span.yellowhighlight::after {
  content: "";
  position: absolute;
  left: -0.15em;
  right: -0.15em;
  top: 0.8em;
  height: 0.4em;
  border-radius: 2em;
  background: #fffa50;
  z-index: -1;
}
<h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster Affiliate Program</span> -
  Activation Bonus
</h1>

Solution

  • Use background to achieve this:

    span.yellowhighlight {
  --s:0.4em; /* control the size */
  --d:2px;  /* control the distance */
  background:
    linear-gradient(#fffa50 0 0) 50% calc(100% - var(--d))/calc(100% - var(--s)) var(--s),
    radial-gradient(farthest-side,#fffa50 98%,#0000) bottom var(--d) left  0/var(--s) var(--s),
    radial-gradient(farthest-side,#fffa50 98%,#0000) bottom var(--d) right 0/var(--s) var(--s);
  background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}
    <h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster Affiliate Program</span> -
  Activation Bonus
</h1>

<h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster Affiliate<br> Program</span> -
  Activation Bonus
</h1>

    To understand the trick use a different coloration for each background layer:

    span.yellowhighlight {
  --s:0.4em; /* control the size */
  background:
    linear-gradient(pink 0 0) bottom/calc(100% - var(--s)) var(--s),
    radial-gradient(farthest-side,blue 98%,#0000) bottom left /var(--s) var(--s),
    radial-gradient(farthest-side,red 98%,#0000) bottom right/var(--s) var(--s);
  background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}
    <h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster Affiliate Program</span> -
  Activation Bonus
</h1>

<h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster Affiliate<br> Program</span> -
  Activation Bonus
</h1>