Lately, I've become accustomed to using box-shadow to add backgrounds to text headings. I've been employing a little trick of applying a box-shadow to a span element within h1 tags in order to create a unique "background with padding" highlight effect for headings that span multiple lines. The background aligns to the end of the span instead of the whole heading block element, resulting in a neat look as shown below.
https://i.sstatic.net/lMiW2.png
h1.highlight span {
box-shadow: 0 0 0 16px #fff000;
background-color: #fff000;
line-height: 1.6;
box-decoration-break: clone;
}
<h1 class="highlight"><span>Highlight text<br />goes here</span></h1>
However, recently I've observed that this technique no longer produces the desired effect. The box-shadow breaks when the heading extends to a second line, as demonstrated here: https://codepen.io/georgiacobrien/pen/LYBbJge
My question is twofold - first, does anyone know why this is now rendering differently? And secondly, is there a better method to achieve a similar effect for headings that span multiple lines?