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

Question

我需要像黄线一样。

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

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

请给我一些提示！

Answer 1

这应该做

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>

来源：

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

Answer 2

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

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

<p>Some text, <span class="half_bottom">Some half background on text</span>.</p>

希望有帮助。

Answer 3

我发现*这非常有用，我只用了一次。

.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%;
}

只需在要突出显示的文本上使用<span class="half-highlight"> </span>，希望它对您有用！

*来源：https://codepen.io/JesmoDrazik/pen/ZWBdqq

Answer 4

您可以做的是在CSS3中使用线性渐变来实现此目的，但是对浏览器的支持仍然处于边缘。 https://caniuse.com/#feat=css-gradients

下面是它的外观示例：

HTML：

<div class="container mt-5">
  <div class="row">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. <span class="highlighted">Sunt maiores, praesentium possimus itaque laudantium modi ratione cumque nisi quis quae hic. Maiores iure a dicta fugiat dolores modi in neque! Lorem ipsum dolor sit, amet consectetur adipisicing elit.</span> Facere ipsum sequi necessitatibus ex consectetur libero cumque velit culpa aut quo magnam eaque adipisci cupiditate eos autem molestiae, quisquam vel iusto.
    </p>
  </div>
</div>

CSS：

.highlighted {
  background: linear-gradient(0deg, yellow 50%, transparent 50%);
}

要查看实际使用的代码，请点击以下链接： https://codepen.io/anon/pen/ejBLeq?editors=1100