CSS: Background color on text doesn't work when the line breaks in responsive mode-CodePudding

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:

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,

CodePudding user response：

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 ><span>The skippers escape</span></h1>

CodePudding user response：

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:

Make sure links never occupy more than 1 line. You can use white-space: nowrap;
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 >THE SKIPPER´S ESCAPE</div>

CodePudding user response：

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 >The Skippers <br>Escape</h2>

<div >
  <h2>The Skippers <br>Escape<span ></span></h2>
</div>

CodePudding user response：

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 >
  <h2 >
    The Skipper's <br>Escape</h2>
</div>

<div >
  <h2 >
    The Skipper's <br>Escape</h2>
</div>