Offset block colour behind text

Question

Im looking for a way to style text like this :

I have tried h2::before pseudo class however it adds the style to the whole h2 element rather than the text so will not style over multiple lines.

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

Thoughts on the best way to do this?

Answer 1

You can make the title display:inline then use linear-gradient like this :

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>