Multi-line highlight effect on text (on hover)

NOTES: for this effect to work, HTMLElement, on which we set this effect, should have display property set to "inline", otherwise this very effect won't work. If we want to adjust its width, we should wrap it into some "block" wrapper

by Konstantin Rouda

HTML

<p class="text-wrapper">
  <span class="text text--full-line">Woah, That's pretty cool, Gotta remember that ! I'm just gonna highlight this for future reference. Who knows I might forget this. Better not forget this. I wish my memory was better, But oh well, that's that.</span>
</p>


<p class="text-wrapper">
  <span class="text text--bottom-line">Woah, That's pretty cool, Gotta remember that ! I'm just gonna highlight this for future reference. Who knows I might forget this. Better not forget this. I wish my memory was better, But oh well, that's that.</span>
</p>

CSS

/*
NOTES: for this effect to work,
HTMLElement, on which we set this effect,
should have display property set to "inline",
otherwise this very effect won't work.
If we want to adjust its width, we should wrap it into some "block" wrapper
*/



.text--full-line {
  background-image: linear-gradient(rgb(195, 227, 255), rgb(161, 196, 225));
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-out;
}

.text--full-line:hover {
  background-size: 100% 100%;
}

.text--bottom-line {
    background-image: linear-gradient(to right, rgb(195, 227, 255), rgb(161, 196, 225));
    background-size: 0% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-out;
}


.text--bottom-line:hover {
    background-size: 100% 2px;
}









/*NOT RELATED STYLE*/
BODY {
  min-height: 100vh;
}

.text-wrapper {
  max-width: 500px;
  margin: 5rem auto;
}

JavaScript

/*
expired by:
https://codepen.io/MananTank/pen/qBdyZXR
*/