CSS custom text highlight that works across multiple lines

Question

I'm trying to find a way to create a custom highlight in CSS that takes up ~50% of the text height, centered vertically, that also works over multiple lines. I can do it a few ways that work on a single line, but all fall over when applied to multi line text, or aren't able to vertically center.

hr {
  margin: 15px 0;
}

.title-psuedo .background {
  position: relative;
  padding-left: 40px;
  padding-right: 40px;  
}

.title-psuedo .background:after {
  content: "";
  position: absolute;
  width: 100%;
  background: yellow;
  left: 0;
  bottom: 0.3em;
  height: 0.4em;
  z-index: -1;
}

.title-mark mark {
  display: inline-block;
  line-height: 0em;
  padding-bottom: 0.5em;
  padding-left: 40px;
  padding-right: 40px;  
}

.title-shadow .background {
  box-shadow: inset 0 -0.5em 0 yellow;
  padding-left: 40px;
  padding-right: 40px;  
}

.title-background .background {
  padding: 0 40px;
  line-height: 0.5em;
  margin: 0.25em 0;
  background-color: yellow;
  display: inline-block;
}


  This is the desired effect.





  This works on one line, but not when the text spans onto 2 separate lines, as the background messes up and only appears on the last line of the content.





  This works on one line, but not when the text spans onto 2 separate lines, as the lines merge into one single line which isn't legible. Also, I'm not sure the highlight can be centered vertically.





  This works on multiple lines, but I'm not sure the highlight can be centered vertically. Additionally, the second line does not have the same padding as the first.





  This works on one line, but not when the text spans onto 2 separate lines as the line height collapses the text together and the highlight covers both lines without a gap. The second line does have the initial padding however.

user_13770936 · Answer

I found a solution with the help of repeating-linear-gradient() CSS property. In my solution you must define font-size and line-height. Then according to them you define the last number in repeating-linear-gradient(). Here is my code:

.text-deco .background2 {
    line-height: 2;
    font-size: 1rem;
    display: block;
    background-image: repeating-linear-gradient(transparent,transparent 0.9rem,yellow 0.9rem, yellow 1.1rem,transparent 1.1rem, transparent 2rem);
}


     This works on one line, but not when the text spans onto 2 separate lines as the line height collapses the text together and the highlight covers both lines without a gap. The second nd the highlight covers both lines without a gap. The second

I mean that for example If you want to have font-size:2rem and line-height:2 then you must change the last part (transparent 2rem) of repeating-linear-gradient() to transparent 4rem and then adjust other values in repeating-linear-gradient() according to that. For example 1.1 may change to 2.8. Maybe now my settings does not show the highlight in exact vertical position, but you can adjust values to reach your desired one.

user_8620333 · Answer

Use gradient and box-decoration-break

.title {
  --lineHeight: 1.4em;
}

.title span {
  line-height: var(--lineHeight);
  padding: 0 40px;
  background: linear-gradient(yellow 0 0) 0/100% calc(var(--lineHeight)/4) no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.title {
  margin: 0 20px;
}


  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget mi vitae felis molestie volutpat. Integer viverra arcu id turpis molestie, id mollis enim molestie. Proin luctus auctor dictum. Maecenas nec libero bibendum, semper erat a, tristique nunc. Fusce accumsan feugiat ante,

CSS custom text highlight that works across multiple lines

2 Answers