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

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

<p>And the CSS:</p>

<pre><code>.selection {
  background: lightblue;
  padding-left: 3px;
  padding-right: 3px;
  border: solid blue thin;    
}
</code></pre>

<p>What I'm hoping to achieve is an outline for the area covered by the span, like this:
<a href="https://i.stack.imgur.com/GjDH6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GjDH6.png" alt="Desired effect"></a></p>

<p>But instead, the border is replicated in-between lines:
<a href="https://i.stack.imgur.com/IFzAo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IFzAo.png" alt="Result of CSS"></a></p>

<p>Then I figured I'll just remove the <code>border</code> from my CSS, which would give me this:
<a href="https://i.stack.imgur.com/IKpDM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IKpDM.png" alt="Compromise"></a></p>

<p>But in reality it looks just as odd:</p>

<p><a href="https://i.stack.imgur.com/J94Lf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J94Lf.png" alt="Result of CSS without the border"></a></p>

<p>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?</p>