Cobus Kruger Cobus Kruger - 1 year ago 150
CSS Question

CSS style to outline a span

I'm trying to style a text highlight, but the CSS to do it completely escapes me. Here is a sample of the HTML:

This is a long <span class="selection">piece of text, whose sole purpose is being long enough to wrap over several lines,</span> so I can illustrate my problem.

And the CSS:

.selection {
background: lightblue;
padding-left: 3px;
padding-right: 3px;
border: solid blue thin;

What I'm hoping to achieve is an outline for the area covered by the span, like this:
Desired effect

But instead, the border is replicated in-between lines:
Result of CSS

Then I figured I'll just remove the
from my CSS, which would give me this:

But in reality it looks just as odd:

Result of CSS without the border

I understand conceptually what is going on; the span includes only the text, not the line spacing. My CSS skills don't go much further than the snippet above, but is there really no way to get rid of those border lines in-between?

Answer Source

use outline instead of border to achieve the desired look & feel. [I took the snippet from Hitmands answer and changed it a little bit]

.text-highlighted {
  background: cyan;
  outline: 1px solid blue;
  padding: .2em .4em;

.entry { max-width: 200px; padding: .5em; }
<div class="entry">This is a long <mark class="text-highlighted">piece of text, whose sole purpose is being long enough to wrap over several lines,</mark> so I can illustrate my problem.</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download