use css or js highlight text with half height [duplicate]

Question

I need to do like the yellow line.

I know use <span> or <p> can imitate the mark effect. But I need this mark not to full text height, must be 1/2 or 1/3 height.(like picture)

I try to use pseudo class(before & after), but still failed.

Please give me some tips!

Answer 1

The easiest and fastest way I can think about is to use a linear-gradient to “half fill” your background:

.half_background {
  background: linear-gradient(to top, yellow 50%, transparent 50%);
}

<p>Some text, <span class="half_background">some other text with half background</span>.</p>

⋅ ⋅ ⋅

Then, we can easily expand that to do some other things:

p {
  background-color: #eee;
  margin: 0.4em 0;
  padding: 0.6em;
}

.half_background {
  background: linear-gradient(to top, var(--bot) 50%, var(--top) 50%);
}

<p>Some text, <span class="half_background" style="--top: transparent; --bot: yellow;">some other text with half background</span>.</p>
<p>Some text, <span class="half_background" style="--top: orange; --bot: transparent;">some other text with half background</span>.</p>
<p>Some text, <span class="half_background" style="--top: violet; --bot: cyan;">some other text with half background</span>.</p>

Answer 2

This should do it

h1 {
    position: relative;
    color: #FFF;
}

h1:after {
    content: attr(data-content);
    position: absolute;
    color: #000;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: yellow;
}

h1::selection {
    background: white;
}

<h1 data-content="Hello world!">Hello world!</h1>

source:

How to apply a background color to only half of the text on selecting?

Answer 3

I found* this and was so useful, I used it once.

.half-highlight {
  font-size: 30px;
  background-image: linear-gradient(to right, transparent 50%, green 50%);
  background-origin: 0;
  background-size: 200% 50%;
  background-repeat: repeat-x;
  background-position: 0 100%;
  transition: background-position 0.5s;
  background-position: -100% 100%;
}

Just use <span class="half-highlight"> </span> on the text you want to highlight, hope it works for you!!!

*source: https://codepen.io/JesmoDrazik/pen/ZWBdqq