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

Answer 1

The only solution i can think of is to have scaffolding

.main {
  width: 20%;
  margin: 0 auto;
  line-height: 2;
  border: 1px solid;
}

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

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

<div class="main">
  <div class="scaffolding "> <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></div>
  <div class="scaffolding "> <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></div>
  <div class="scaffolding "> <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></div>
</div>

---

Or borders matching background, problem with this is that you'll have to find a border width to match the font size of the text and there should no space between tags in the markup

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  width: 90%;
  margin: 0 auto;
  line-height: 2;
}

span {
  background: rgba(255, 0, 0, 0.2);
  border: 8px solid #fff;
}

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 2

You can also use CSS transition property to make this happen. Specifically, you introduce a transition delay on mouseout but no delay on hover.

SO... what will happen is that on hover the background will change, but on mouseout it takes a full second (or 1.25s or 2s or etc) for the background transition to kick-in. IF the user moves onto another span, the background change will be over-ridden/cancelled (so to speak), keeping the background color unchanged. The end result is exactly what you have requested.

The magic here is to add both of these CSS directives:

span      {transition:background-color 0s ease-out 1s;} /* 1s delay on mouseout */
span:hover{transition:background-color 0s ease-out 0s;} /* No delay on hover */

div {
  width: 20%;
  margin: 0 auto;
  line-height: 2;
}

span {
  height: 2em;
  background: rgba(255, 255, 0, 0.2);
  vertical-align: middle;
  transition: background-color 0s ease-out 1s; /*  1s delay on mouseout */
}

span:hover {
  background: rgba(255, 0, 0, .5);
  transition: background-color 0s ease-out 0s; /*  No delay on hover */
}

<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 3

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>

Here is another idea that rely on vertical padding (that doesn't affect the layout) and background-clip.

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-color: rgba(255, 0, 0, 0.2);
  vertical-align: middle;
  padding:1em 0; /*we increase the area*/
  background-clip:content-box; /*we show background only on content*/
}

span:hover {
  background-color: 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>