[CSS Code] How to add a coloured background to inline text (Firefox friendly)
Using CSS: How to add a solid colour background on each line of inline text. Example:
HTML Code
<h2><span>Inline grey text with a white background</span></h2>
CSS Code
h2 span.highlight {
background: #fff;
color: #333;
box-shadow: 10px 0 0 #fff,-10px 0 0 #fff;
-moz-box-shadow: 10px 0 0 #fff,-10px 0 0 #fff;
-webkit-box-shadow: 10px 0 0 #fff,-10px 0 0 #fff;
box-decoration-break: clone; /* include for FireFox compatibility */
}
You’ll need to play with the line-height of the H2 tag, depending on its font-size, in order to manage the gap between the white background of each line of text.