CSS: Background-color on multi-line text?

I think this is what you are looking for: http://jsfiddle.net/9BTYQ/1/

span {
    color: white;
    background-color: #343132;
    box-shadow: 0.5em 0 0 #343132,-0.5em 0 0 #343132;
}

div {
    width: 100px;
}
<div>
    <span>Do you have an idea to add a background-color property on a multi-line text, with two difficulties:</span>
</div>   

The box-shadow solution as shown by @gabitzish stopped working properly in IE11 and FF34+ (released 09-2014).

You can add box-decoration-break:clone; to make it work in IE11 and FF34+ too:

p {
    display: inline;
    padding: 0.5em 0em;
    background-color: #FFAA3B;
    box-shadow: 1em 0 0 #FFAA3B, -1em 0 0 #FFAA3B;
    box-decoration-break: clone;
}

Works in Webkit, Firefox, IE9+ with proper prefixes.

Demo : http://jsfiddle.net/cLh0onv3/1/

Note: Already stated this elsewhere.

Tags:

Css