2 ms·
Multi-Line Padded Text with the CSS Box-Decoration-Break
- wanda 10y agoTo extend support to IE9+, you can use a double box-shadow, one going left and one going right, to imperfectly simulate the effect. A noteworthy instance of this trick in the real world is Bloomberg[0], for their article headers. They achieve the effect like so: .lede-text-only__highlight { background-color: #FFF; box-shadow: 7px 0 0 #FFF, -7px 0 0 #FFF; box-decoration-break: clone; } Intriguingly they don't bother to use the -webkit- vendor prefixed property, despite box-decoration-break not having unprefixed support in Blink[1] yet. Perhaps their intention is to avoid delivering more bytes of CSS than necessary, based on user-agent sniffing. [0] https://www.bloomberg.com/ https://www.bloomberg.com/ (pick an article). [1] As of build 537.36 (at least on my machine).