Highlighter effect: Adding box decorations—like padding—to inline elements that wrap onto multiple lines

As a CSS learning exercise I took the design of blogTO's homepage and coded a clone using HTML and CSS. The titles for each article have a "highlight" effect in white, which seemed easy enough until they took up multiple lines

Highlighting text is easy with `<span>`

Highlighting is easily added by wrapping the text you want highlighted with span and setting a background colour for the span in CSS. Note: span is an inline element, meaning it does not start on a new line and only takes up as much width as needed



<p>The spectacle before us was indeed sublime. 
Then <span class="highlight">came the night of the first falling star.</span> 
Waves flung themselves at the blue evening.</p>



.highlight {
  background-color: yellow;
}

Trouble comes when we start adding box decorations

When adding padding, border, margin, box-shadow, and other box decorations to inline elements (i.e. <span>) these properties are not by default applied to the element where the the text wraps onto another line

CSS for highlighting with padding and border-radius



.highlight {
  background-color: yellow;
  border-radius: 20px;
  padding: 10px;
}

The `box-decoration-break` property solves this nicely

The box-decoration-break property specifies how an element's box-decorations (i.e. padding, border) should be rendered when broken across multiple lines, columns, or pages. Options for box-decoration-break are slice and clone. slice is the default, which does not add the box-decoration when the element goes onto multiple lines. With clone, the box-decoration is applied where the element breaks into multiple lines

CSS for highlighting with box-decoration-break



.highlight {
  background-color: yellow;
  border-radius: 20px;
  padding: 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* most browsers need -webkit */
}

Most browsers support box-decoration-break with the -webkit- prefix

Demo

Browser support

There are some limitations when it comes to browser support. Some browsers do not support column or page breaks, but most support line breaks for inline elements. Not surprisingly IE does not support it, and Edge support starts from Edge 79. Check Can I Use for details

If you need to support older browsers, a possible solution is styling three nested elements. The trick is adding an extra thick left-border on the outermost element. The innermost element contains the text, and is shifted over to the left. The middle-nested element adds top and bottom padding. See CSS Tricks for details