Question

I’m highlighting text in a HTML document using <span> tags around the content to be highlighted. The span class has a background-color defined, and a border-radius is also set. This works well.

I’d like the highlight to extend a bit further beyond the normal extents of the <span> content. That is, a few pixels to the left of the span-start, and a few pixels to the right of the span-end. Ideally I’d do this without spacing apart the content itself.

Any good css tricks I can use to achieve this?

Answer 1

You can set a padding and a negative margin. For example:

span {
    margin: -5px;
    padding: 5px;
}

You can see a demo here.