Exciting Multi-line Highlights

<div class="container">
  <div class="instruction">Hover the paragraph to see the effect 👀 </div>
  <h1>HIGHLIGHT 📝</h1>
  <div class="content v2">
    <p>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.</p>
  </div>
  <h1>SPOILERS 💩</h1>
  <div class="content v3">
    <p>This season is gonna blow your mind ! Like this season is crazy dawg! You know what happens on the first episode ? You are not gonna believe me bro, like It's crazy dude !</p>
  </div>
  <h1>UNDERLINE 🍧</h1>
  <div class="content v1">
    <p>This thing is really really important, you don't wanna miss this. Trust me. This is like really really important. like really really.</p>
  </div>
  <h1>DASHES 😎</h1>
  <div class="content v4">
    <p>I dont' know dude, May be this could be important, May be not, who knows? I don't know, Do you know? Do you know somebody that knows this maybe, call me maybe.</p>
  </div>
  <h1>SEE DELETED 🙈</h1>
  <div class="content v5">
    <p>Remember when I told you about this thing back in the day, when I was younger, you know those days right? Well guess what, I was totally wrong about that. Heh, This is embarassing </p>
  </div>
  <h1>SEE DELETED 🙈2 </h1>
  <div class="content v6">
    <p>Hold on, Hold on. May be I WAS right at the time, they just changed the stuff now. Like I didn't know this was gonna happen, but now that It did, Well I guess I have to remove this now..</p>
  </div>
  <h1>CRAZY LINES 🤡</h1>
  <div class="content v7">
    <p>YO! What's up everybody, It's ya-boi Shloopy Mcfloopy-face, back at it again with the new stuff! This time it's gon-be liiiittt, son ! Hit that Subscribbe Button, Smash that bell! See you guys on the next video</p>
  </div>
  <h1>SWIPE 🎨</h1>
  <div class="content v8">
    <p>Here is the point, This point of mine is Striking, It is powerful. It is important. I have the data to back that up, Statistics show that this point of mine is indeed true. A Study conducted in 2015 proves that I have been right all along, what you gonna do about it huh?</p>
  </div>
</div>

green   = #55efc4
red     = #d63031
blue    = #0984e3
purple  = #4834d4
  
body
  font-family   Arial
  font-size     1.5rem
  line-height   150%
  
.container
  max-width   600px
  margin      0 auto
  padding     1em 
  
  h1
    font-size 2.2rem
  
  .instruction
    font-size 1.8rem
    margin-bottom 4rem
    font-style italic
  
 
.content
  margin-bottom 4em
  p
    display inline
    background-repeat no-repeat
    transition all 500ms ease-in-out

// UNDERLINE--------------------------------
.v1
  thickness = 5px
  p
    background-position bottom left
    background-size 0% thickness
    background-image linear-gradient(red, red)
    padding-bottom thickness
  &:hover
    p
      background-size 100% thickness
      
// HIGHLIGHT --------------------------------      
.v2
  p
    background-position left
    background-size 0% 100%
    background-image linear-gradient(green, green)
  &:hover
    p
      background-size: 100% 100%

      
// SPOILERS ------------------------------------------
.v3
  p
    color transparent
    background-position right
    background-size 100% 100%
    background-image linear-gradient(blue, blue)
  &:hover
    p
      color black
      background-size 0% 100%
      
 // DASHES -------------------------------------
.v4
  thickness = 3px
  p
    background-position bottom left
    background-size 0% thickness
    background-image repeating-linear-gradient(to right, purple 0 thickness, transparent 0 (2*thickness))
    padding-bottom thickness
  &:hover
    p
      background-size 100% thickness
      
 // DELETED v1-------------------------------------
.v5
  thickness = 3px
  p
    background-position center left
    background-size 100% thickness
    background-image linear-gradient(to right, black, black)
    padding-bottom thickness
  &:hover
    p
      background-size 100% 100%
      color white
      background-image linear-gradient(to right, red, red)
      
 // DELETED v2-------------------------------------
.v6
  thickness = 4px
  p
    background-position center left
    background-size 100% thickness
    background-image linear-gradient(to right, black, black)
    padding-bottom thickness
  &:hover
    p
      background-position bottom left
      background-size 100% (thickness/2)
      font-style italic
      
      
// CRAZY -------------------------------------
.v7
  p
    background-position left
    background-size 0% 100%
    background-image linear-gradient(to right, green, green)
  &:hover
    p
      background-position right
      background-size 100% 100%
      
      
 // SWIPE -------------------------------------
.v8
  thickness = 4px
  p
    background-position left
    background-size 0% 100%
    background-image linear-gradient(to right, green, yellow)
    padding-bottom thickness
    box-decoration-break clone
    -webkit-box-decoration-break clone
  &:hover
    p
      background-size 100% 100%