Cobus Kruger Cobus Kruger - 5 months ago 18
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
border
from my CSS, which would give me this:
Compromise

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

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>

Comments