<分区>
我需要像黄线那样做。
我知道使用<span>或 <p>可以模仿标记效果。
但我需要这个标记 not to full 文本高度，必须是 1/2 或 1/3 高度。(如图)
我尝试使用伪类(之前和之后)，但仍然失败。
请给我一些提示!
<分区>
我需要像黄线那样做。
我知道使用<span>或 <p>可以模仿标记效果。
但我需要这个标记 not to full 文本高度，必须是 1/2 或 1/3 高度。(如图)
我尝试使用伪类(之前和之后)，但仍然失败。
请给我一些提示!
最佳答案
我能想到的最简单和最快的方法是使用 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>关于javascript - 使用 css 或 js 突出显示半高文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51436852/