0

I am trying to use a background color on text only, which works fine on single lines, but when the line breaks in responsive mode it ends up looking like this:

enter image description here

Does anyone know what to add to make the yellow background line follow the text on mulitple lines?

This is my code:

.background-highlight {
  position: relative;
    display: inline-block;
    color: #faf9f4;
}

.background-highlight:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 10px;
  left: 0;
    top: 50%;
  background-color: #cef230;
    z-index: -1;
}

Thanks a lot in advance,

nastasiatornbo
  • 23
  • 5
  • Can you provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example), please? – Anton Jun 21 '22 at 05:57

4 Answers4

4

I have used box-decoration-break: clone; property for mainting the same design for multiple lines don't forget to add display: inline; to its child where background is added. in child I have used linear gradient you can generate according to you from here. you can chenge the position of green strip by adjusting gradient values from the site.

.background-highlight {
  position: relative;
    display: inline-block;
    color: #000;
   -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  font-size: 120px;
    
}
.background-highlight span {
  display: inline;
 background: rgb(206,242,48);
background: -webkit-gradient(linear, left bottom, left top, color-stop(11%, rgba(206,242,48,1)), color-stop(12%, rgba(255,255,255,0)));
background: -o-linear-gradient(bottom, rgba(206,242,48,1) 11%, rgba(255,255,255,0) 12%);
background: linear-gradient(0deg, rgba(206,242,48,1) 11%, rgba(255,255,255,0) 12%);
}
 
<h1 class="background-highlight"><span>The skippers escape</span></h1>
Shahil Mishra
  • 470
  • 3
  • 14
1

It is fault of pseudo element that is forced to break between two lines. The cause is the way the effect is carried out, pseudo element ::before creates a single rectangle that has no way of splitting up to follow words flow. Posible solutions:

  1. Make sure links never occupy more than 1 line. You can use white-space: nowrap;
  2. Redesign the effect applying box border to main element. For example:

.background-highlight {
  width: max-content;
  border-bottom:5px solid rgb(217, 255, 0);
}
        <div class="background-highlight">THE SKIPPER´S ESCAPE</div>
Max Tuzenko
  • 1,051
  • 6
  • 18
0

Pseudo-element solution

Use the bottom-positioning value on the pseudo-element instead of top. This forces the pseudo-element to be positioned at the bottom, instead of 50%from the top. I used bottom: -10px as that is the height of the pseudo-element, so it aligns perfectly.

Read more on position values: https://developer.mozilla.org/en-US/docs/Web/CSS/position

HTML-element solution

Instead of creating a pseudo-element, you could opt to make an HTML element instead.

Make a parent container, apply flex to it so the text and the line will align.

Make the .line-element a block element, so it will break into a new line.

You can still apply position: absolute and position: relative on the .line and the h2 if you want to position it in another way. Or you could simply use e.g. transform: translateY(5px) to move the line up a bit.

.background-highlight {
  position: relative;
  display: inline-block;
  color: black;
  text-align: right;
}

.background-highlight:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 10px;
  left: 0;
  bottom: -10px;
  background-color: #cef230;
  z-index: -1;
}


/* Without pseudo */
.nopseudo {
  display: flex;
}

.nopseudo h2 {
  text-align: right;
}

.nopseudo .line {
  height: 10px;
  width: 100%;
  background-color: #cef230;
  display: block;
}
<h2 class="background-highlight">The Skippers <br>Escape</h2>

<div class="nopseudo">
  <h2>The Skippers <br>Escape<span class="line"></span></h2>
</div>
Sigurd Mazanti
  • 2,098
  • 1
  • 8
  • 24
0

I don't know how is your structure but this might help.

We just need two div elements, one as a container to setup the width property and the text holder in this case I will use a h2 tag.

Just mkae the ::after pseudo element as display and the .background-highlight's width can be width: match-content or 100% in this case if you just want to cover the text use match-content if you want to cover the width of the .title element use 100%

.title {
  width: 90vw;
  text-align: end;
}

h2 {
  text-transform: uppercase;
  color: #374650;
}

.fullwidth {
  width: 100%;
}

.match {
  width: match-content;
}

.background-highlight {
  position: relative;
  display: inline-block;
}

.background-highlight:after {
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  background-color: #cef230;
  z-index: -1;
}
<div class="title">
  <h2 class="match background-highlight">
    The Skipper's <br>Escape</h2>
</div>

<div class="title">
  <h2 class="fullwidth background-highlight">
    The Skipper's <br>Escape</h2>
</div>
Teocci
  • 7,189
  • 1
  • 50
  • 48