html - Proper CSS for highlighted text with hover

Question

Referencing this codepen: https://codepen.io/dvreed77/pen/yrwjoM.

I want to highlight some text while having the large gap between lines, and keep the hovering event constant while hovering over a single block of text. Right now, it flashes quickly on-off-on when you hit the whitespace between lines.

I've tried setting height and a few other things, but none of them do the trick and I'm a bit lost.

Code is also referenced below

div {
  width: 90%; /* Adjusted to suit the JS-Snippet layout */
  margin: 0 auto;
  line-height: 2;
}

span {
  height: 2em;
  background: rgba(255, 0, 0, 0.2);
  vertical-align: middle;
}

span:hover {
  background: rgba(255, 0, 0, 0.5);
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, enim eu fermentum condimentum, nulla tellus suscipit libero, quis tincidunt eros metus sed leo.</span> 
  <span>Suspendisse eu augue lectus.</span>
  <span>Sed aliquam pulvinar nibh eu vulputate. Sed venenatis eros at nisl ornare sollicitudin. Duis nec est gravida, sodales orci in, blandit magna.</span>            
  <span>Donec semper sodales lacus vel consequat.</span>
  <span>Mauris augue lectus, pretium eget dui interdum, iaculis dictum erat.</span>
  <span>Pellentesque sed nulla blandit, suscipit risus eu, malesuada justo.</span>
  <span>Fusce in dignissim magna. Quisque at tincidunt mauris.</span>
  <span>Fusce augue mauris, ornare eget lorem sed, bibendum lacinia justo.</span>
  <span>Nullam et vestibulum neque.</span>
  <span>Duis eget mauris elementum leo scelerisque dignissim accumsan tempor ex.</span>
  <span>Donec facilisis sollicitudin urna, sed efficitur ex ornare at.</span>      
  <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>
  <span>Duis at sem nibh. Sed sagittis velit sed ex tincidunt gravida facilisis eu augue.</span>
  <span>Aenean dapibus sem et dolor venenatis facilisis. Sed arcu tortor, luctus id felis quis, venenatis malesuada leo. Fusce vitae semper lacus.</span>
  <span>Phasellus magna eros, lobortis a faucibus a, elementum et sem. Nunc porta auctor arcu, eu viverra tellus vestibulum id. Morbi consequat sed magna id aliquam.</span>
  <span>Donec vehicula odio nec ullamcorper ornare.</span>
  <span> Vestibulum ut ultricies neque.</span>
</div>

Answer 1

Here is a hack using pseudo element where the idea is to make the hoverable space of the span bigger and cover the area between the lines.

div {
  width: 90%; /* Adjusted to suit the JS-Snippet layout */
  margin: 0 auto;
  line-height: 2;
  position:relative; /*relative to the div and not the span !*/
  z-index:0;
  overflow:hidden; /*hide the overflow of the pseudo element*/
}

span {
  background: rgba(255, 0, 0, 0.2);
  vertical-align: middle;
}

span:hover {
  background: rgba(255, 0, 0, 0.5);
}
span:before {
  content:"";
  position:absolute;
  /* Don't set any top and bottom value! */
  left:0;
  right:0;
  height:100vh; /* a big height*/
  z-index:-2;
}
/*make the pseudo element on the top of all the others on span hover*/
span:hover:before {
  z-index:-1;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, enim eu fermentum condimentum, nulla tellus suscipit libero, quis tincidunt eros metus sed leo.</span> 
  <span>Suspendisse eu augue lectus.</span>
  <span>Sed aliquam pulvinar nibh eu vulputate. Sed venenatis eros at nisl ornare sollicitudin. Duis nec est gravida, sodales orci in, blandit magna.</span>            
  <span>Donec semper sodales lacus vel consequat.</span>
  <span>Mauris augue lectus, pretium eget dui interdum, iaculis dictum erat.</span>
  <span>Pellentesque sed nulla blandit, suscipit risus eu, malesuada justo.</span>
  <span>Fusce in dignissim magna. Quisque at tincidunt mauris.</span>
  <span>Fusce augue mauris, ornare eget lorem sed, bibendum lacinia justo.</span>
  <span>Nullam et vestibulum neque.</span>
  <span>Duis eget mauris elementum leo scelerisque dignissim accumsan tempor ex.</span>
  <span>Donec facilisis sollicitudin urna, sed efficitur ex ornare at.</span>      
  <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>
  <span>Duis at sem nibh. Sed sagittis velit sed ex tincidunt gravida facilisis eu augue.</span>
  <span>Aenean dapibus sem et dolor venenatis facilisis. Sed arcu tortor, luctus id felis quis, venenatis malesuada leo. Fusce vitae semper lacus.</span>
  <span>Phasellus magna eros, lobortis a faucibus a, elementum et sem. Nunc porta auctor arcu, eu viverra tellus vestibulum id. Morbi consequat sed magna id aliquam.</span>
  <span>Donec vehicula odio nec ullamcorper ornare.</span>
  <span> Vestibulum ut ultricies neque.</span>
</div>