Posted over 3 years ago. Visible to the public. Linked content.
CSS: Giving text lines a background-color (with configurable line padding and margin)
The gist is:
- wrap the text with a
span - use
line-heightfor the spacing between lines ("margin") - use
box-shadowto control the line background size ("padding")
Example
Copyspan box-shadow: 0 0 0 10px #fff background-color: #fff box-decoration-break: clone # Fix Firefox line-height: 2.2
→ jsfiddle
The fourth number of box-shadow indicates spread, which can be imagined as the shadow growth when moving the light source closer towards the object. The shadow in my example creates a visual padding of 10px.
Custom Padding
You can combine multiple shadows, moving each where you need the padding. Example with 7px extra padding left and right:
Copybox-shadow: -7px 0 0 10px #fff, 7px 0 0 10px #fff
Note that this does only work with opaque colors.
Thanks to Geoff Muskett for the inspiration.
makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.
