I'm used to using box-shadow as a way to give backgrounds to text headings, and have made use of the trick of applying a box-shadow to a within tags for a neat "background with padding" highlight effect for headings that go over multiple lines, with the background aligning to the end of the span instead of the heading block element. The following code used to create an effect like the picture below.

h1.highlight span {
        box-shadow: 0 0 0 16px #fff000;
        background-color: #fff000;
        line-height: 1.6;
        box-decoration-break: clone;
    }

<h1 ><span>Highlight text<br />goes here</span></h1>

However in the past couple of months, I've noticed that this trick no longer works and the box-shadow affect once again breaks when the heading goes to a second line as here: https://codepen.io/georgiacobrien/pen/LYBbJge

Firstly, does anyone know why this is now being rendered differently and 2. Is there a better way to be getting the same effect for heading that go over multiple lines?

CodePudding user response：

It looks like you are trying to use the box-shadow property to create a highlight effect on text within an h1 element. Here is a revised version of the code that should achieve the desired effect:

h1.highlight span {
  box-shadow: 0 0 0 16px #fff000;
  background-color: transparent;
  line-height: 1.6;
  box-decoration-break: clone;
}

<h1 ><span>Highlight text<br />goes here</span></h1>

CodePudding user response：

Seems this is a Chrome/webkit quirk. I've always used box-decoration-break: clone; without prefixes to no issue on Chrome, but it now seems you need to use with webkit prefix (-webkit-box-decoration-break: clone;) for this to work. Weird but there you go!