Send text highlight behind the text that comes after the highlight

Question

I have a block of text, and I decreased the line height because I like it better that way. Sometimes the top of the h touches the bottom of the p above it, and that's okay.

My problem is that when I highlight text using <mark>, the background-color covers the lower half of the text on the line above it.

Please see it here

The text that comes after the highlight is placed on top of it, so I'm optimistic that there's a way to bring the before-text to the front as well.

I tried decreasing the opacity of <mark>, but that made the text itself transparent too.

I'd like to be able to send its background-color behind all text elements, if that's possible. Second place would be to decrease the opacity of just the background-color without affecting the marked text.

I made a snippet but it doesn't show the problem because I can't link to a font. Please see the linked image above to see the problem.

@font-face {
  font-family: 'charmonman';
  src: url('https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&display=swap');
  font-weight: normal;
  font-style: normal;
}

body {
  background: #f5f5f5;
  color: #7030A0;
  font-family: 'charmonman'
  line-height: 1.5;
}

mark {
  background-color: #fff2cc;
  padding-left: 2px;
  padding-right: 2px;
}

<style>
@import url('https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&display=swap');
</style>

<mark><strong>This text is a highlighted sentence.</strong></mark> This is much longer text. The beginning of this section is clear because it appears <strong>over</strong> the background color of the previously highlighted text, but the end of this section is half hidden by the background color of the highlighted text that follows it. <mark><strong>This is the highlighted text that partially covers the line that came before it.</strong></mark>

Answer 1

The issue is caused by the way the <mark> element and its background-color behave. When you highlight text using the <mark> tag, the background-color is applied to the space that the text occupies. This can cause the highlighted background to overlap with the text on the line above it when the line-height is decreased.

You could try using a different approach that involves using linear-gradient as the background for the <mark> tag. The linear-gradient can create a similar effect to the highlight. Here's a potential solution:

mark {
  background: linear-gradient(to right, #fff2cc 100%, transparent 0%);
  background-repeat: repeat-y;
}

In this case, the linear-gradient creates a highlight that covers 100% of the line height, and background-repeat: repeat-y; ensures that the highlight effect is applied to every line of text within the <mark> tag.

Here's your snippet with my proposed solution:

@font-face {
  font-family: 'Charmonman';
  src: url('https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&display=swap');
  font-weight: normal;
  font-style: normal;
}

body {
  background: #f5f5f5;
  color: #7030A0;
  font-family: 'charmonman';
  line-height: 1.5;
}

mark {
  background: #fff2cc;
  background-repeat: repeat-y;
}

<style>
@import url('https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&display=swap');
</style>

<mark><strong>This text is a highlighted sentence.</strong></mark> This is much longer text. The beginning of this section is clear because it appears <strong>over</strong> the background color of the previously highlighted text, <mark>but the end of this section is half hidden by the background color of the highlighted text that follows it. <strong>This is the highlighted text that partially covers the line that came before it.</strong></mark>