使用CSS或JS高亮显示一半的文本

Question

我需要像黄线一样

我知道使用<span>或<p>可以模仿标记效果。但是我需要此标记不要达到全文高度，必须为1/2或1/3高度。（如图片所示）

我尝试使用伪类（之前和之后），但仍然失败。

请给我一些提示！

Answer 1

我能想到的最简单，最快的方法是使用linear-gradient“半填充”您的背景：

.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>

？？？

然后，我们可以轻松地将其扩展为做其他事情：

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>