CODEWITHSUNDEEP
htmlcss
tanGee
tanGee

Reputation: 573

CSS custom text highlight that works across multiple lines

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;
}
<div class="title title-psuedo">
  <span class="background">This is the desired effect.</span>
</div>

<hr>

<div class="title title-psuedo">
  <span class="background">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.</span>
</div>

<hr>

<div class="title title-mark">
  <mark>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.</mark>
</div>

<hr>

<div class="title title-shadow">
  <span class="background">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.</span>
</div>

<hr>

<div class="title title-background">
  <span class="background">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.</span>
</div>

Upvotes: 3

Views: 2028

Answers (2)

Temani Afif
Temani Afif

Reputation: 272608

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;
}
<div class="title title-psuedo">
  <span class="background">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,</span>
</div>

Upvotes: 2

hamid-davodi
hamid-davodi

Reputation: 1966

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);
}
<div class="title text-deco">
     <span class="background2">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</span>
</div>

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.

Upvotes: 1

Related Questions