Yellow underline CSS randomly not applied to full width of span

user_253756 0
Viewed 169

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>

elementor background-color css html
3 Answers

A solution that requires a minimum number of changes to your existing HTML and CSS


After reading all the comments and all the answers, I came up with a solution.

My main goal was not to change any HTML (i.e., same structure, same classes) and not to change the way you want to achieve the underline (i.e., using ::after). I've tested my solution with Chrome DevTools to be sure that it works.

Explanation

The trick is, how to achieve a continuous underline when you have three span elements (i.e., each word in a separate span element).

You need to do just two things:

  1. You can achieve a continuous underline with "overflowing". This can be done by setting width: 120%;.

  2. But you don't want to "overflow" the last span element (regardless of how many there are). This can be done by setting width: 100%; to the last span element.

Screenshot of my solution IRL

Solution

Snippet

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;
  width: 120%; /* Change this. */
}

/* Add this. */
span.yellowhighlight:last-child::after {
  width: 100%;
}
<h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster</span>
  <span class="yellowhighlight">Affiliate</span>
  <span class="yellowhighlight">Program</span>
  - Activation Bonus
</h1>

user_103471450

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>

user_86203330

The issue is that the width isn't set. To make the yellow highlight the full width of the text, just add width: 100% to span.yellowhighlight::after

The final CSS should look like:

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;
  width: 100%;
}

Edit:

Keeping the CSS same, try to edit the HTML like this

<span class="yellowhighlight">Flowster </span>Affiliate Program - Activation Bonus

user_69069010
Related