Posted over 1 year 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-height for the spacing between lines ("margin")
  • use box-shadow to control the line background size ("padding")

Example

text_lines_with_background_color.png

Copy
span 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:

Copy
box-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.

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
over 1 year ago
by Dominik Schöler
Attachments:
text_lines_with_background_color.png
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more