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);
}

  
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, enim eu fermentum condimentum, nulla tellus suscipit libero, quis tincidunt eros metus sed leo.
  
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, enim eu fermentum condimentum, nulla tellus suscipit libero, quis tincidunt eros metus sed leo.
  
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit, enim eu fermentum condimentum, nulla tellus suscipit libero, quis tincidunt eros metus sed leo.

---

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);
}

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