CSS строка после текста влияет на многострочный текст

Question

Я пытаюсь добиться эффекта красного заголовка, показанного на изображении:

Я пытался сделать это с фоном linear-gradient но я не могу этого сделать, так как у страницы есть фон, так как мне нужно применить другой фон к тексту, чтобы получить этот эффект, и это будет очевидно, так как фон текста не будет соответствовать фону страницы. Я также попытался сделать это с box-decoration-break, но безуспешно.

Поскольку это было задано в комментариях, я привожу пример кода. Это самый похожий эффект, который я мог достичь: codepen.io / jorditarrida / pen / eYNQGqa . Это не совсем желаемый эффект, так как текст заголовка имеет фон, который закрывает фон мозаики позади него. Мне, вероятно, понадобился бы совершенно иной подход.

Как мне его достичь? Идеально в чистом CSS, и он должен работать на IE11. Спасибо за вашу помощь :)

Answer 1

Может быть, использование псевдоэлемента может быть решением.

В этом случае ваш диапазон должен быть одной строкой (но вы сказали в комментариях, что это не проблема)

.base {
  height: 100px;
  background-color: lightblue;
  width: 400px;
  overflow: hidden;
}

span {
    font-size: 30px;
    position: relative;
}

span:after {
  content: "";
  background-color: red;
  width: 500px;
  height: 2px;
  top: 20px;
  position: absolute;
  margin-left: 20px;
}

<div class="base">
<span>Some Text</span>
</div>

Как и просили, есть возможность установить этот эффект для многострочного интервала.

Но он использует смешивание, поэтому он не будет работа над IE

.base {
  height: 150px;
  background-image: repeating-linear-gradient(45deg, lightblue 0px, lightyellow 40px);
  width: 430px;
}


.bkg {
  background-image: repeating-linear-gradient(180deg, red 0px, red 5px, white 5px, white 34px);
  background-position: center 15px;
  mix-blend-mode: multiply;
}

span {
    font-size: 30px;
    position: relative;
    background-color: white;
    color: red;
}

<div class="base">
<div class="bkg">
<span>Some Text that is really long and spans several lines</span>
</div>
</div>