多行文本上的文本效果后的CSS行

Question

我正在尝试实现图像上显示的红色标题效果：

我尝试使用linear-gradient背景进行此操作，但由于页面具有背景，因此无法进行此操作，因为我需要对文本应用其他背景才能获得此效果，并且由于文本背景而显而易见不会与页面背景匹配。我也曾尝试使用box-decoration-break进行操作，但未成功。

自从评论被询问以来，我提供了一个代码示例。这是我能达到的最相似的效果：codepen.io/jorditarrida/pen/eYNQGqa。这并不是真正想要的效果，因为标题文本的背景确实遮住了其后面的拼图背景。我可能需要一种截然不同的方法。

我该如何实现？理想情况下，使用纯CSS，它应该可以在IE11上运行。感谢您的帮助：）

Answer 1

可能使用伪元素可能是一个解决方案。