
Multi-Line Padded Text with the CSS Box-Decoration-Break - mmastrac
http://callmenick.com/post/multi-line-padded-text-css-box-decoration-break
======
wanda
To 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).

