Highlighter effect: Adding box decorations—like padding—to inline elements that wrap onto multiple lines
Tags: css, beginners, codenewbie
Published: 2020-05-08 14:23:14

As a CSS learning exercise I took the design of [blogTO's homepage](https://www.blogto.com/) 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

![Screen capture of article title missing padding on the right](https://dev-to-uploads.s3.amazonaws.com/i/qcgtuilcbcumv1hv91of.png)

## 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

![Yellow highlighting of text](https://dev-to-uploads.s3.amazonaws.com/i/gbbzhv656me9lx256r7m.png)

```html
<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>
```
```css
.highlight {
  background-color: yellow;
}
```


## Trouble comes when we start adding box decorations
When adding padding, border, margin, box-shadow, and [other box decorations](https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break#Browser_compatibility) to inline elements (i.e. `<span>`) these properties are not by default applied to the element where the the text wraps onto another line

![Yellow highlighting of text that wraps on two lines; padding and border-radius not added where the line breaks](https://dev-to-uploads.s3.amazonaws.com/i/p3lli3oxvrd96s3pqigq.png)

CSS for highlighting with `padding` and `border-radius`
```css
.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

![Yellow highlighting of text that wraps on two lines with padding and border-radius added to where the line breaks](https://dev-to-uploads.s3.amazonaws.com/i/u8clbd4wrs26dqn25v40.png)

CSS for highlighting with box-decoration-break
```css
.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
{% codepen https://codepen.io/nhuynh1/pen/dyYVmva default-tab=css,result %}

## 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](https://caniuse.com/#feat=css-boxdecorationbreak) 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](https://css-tricks.com/multi-line-padded-text/) for details

### References
- [Multi-Line Padded Text](https://css-tricks.com/multi-line-padded-text/)
- [Multiline Padding with box-decoration-break](https://codepen.io/chriscoyier/pen/hIvFe)
- [box-decoration-break](https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break#Browser_compatibility)
- [Can I Use](https://caniuse.com/#feat=css-boxdecorationbreak)