Pretty html highlighting using <span>

Question

I highlight text in an HTML document using <span> tags around the selected content. The span class has background-color as well as a border-radius . It works well.

I would like the highlight to expand slightly beyond the usual <span> content extents. That is, a few pixels to the left of the span and a few pixels to the right of the span. Ideally, I would do this without marking up the content itself.

Any good css tricks I can use to achieve this?

Answer 1

You can set margins and negative margin. For instance:

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

You can see the demo here .

Answer 2

margin: 10px 0px; ??

If this does not solve your problem, can you solve the problem?