文本后面的偏移块颜色

Question

我正在寻找一种设置文本样式的方法，如下所示：

我已经尝试过 h2::before 伪类，但是它将样式添加到整个 h2 元素而不是文本，因此不会在多行上设置样式。

h2{
  font-size: 48px;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  line-height: 0.9;
}

h2::before {
  content: "";
    position: absolute;
    width: 100%;
    height: 10%;
    top: 21px;
    left: -10px;
    background: rgba(229, 57, 53, 100);
    z-index: -1;
}

关于做到这一点的最佳方法的想法？

Answer 1

您可以制作标题display:inline，然后使用线性渐变，如下所示：

h2 {
  font-size: 48px;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  display: inline;
  background-image: linear-gradient(#fff 60%, #ff9797 55%);
}

<h2>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</h2>