Exciting Multi-line Highlights

Exciting Multi-line Highlights developed using Pug and Stylus. Selection of fun hover highlights for multi-line text. Careful when you hover over that spoiler.

See the Pen Exciting Multi-line Highlights by Manan Tank (@MananTank) on CodePen.

Created on March 19, 2020 Updated on April 7, 2020. A Pen by Manan Tank on CodePen. License.

.container
  .instruction Hover the paragraph to see the effect 👀 

  h1 HIGHLIGHT 📝
  .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.

  h1 SPOILERS 💩
  .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 !
    
  h1 UNDERLINE 🍧
  .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.
    
  h1 DASHES 😎
  .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.
    
  h1 SEE DELETED 🙈
  .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 
    
  h1 SEE DELETED 🙈2 
  .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..
    
  h1 CRAZY LINES 🤡
  .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
    
  h1 SWIPE 🎨
  .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?
    

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

body {
  font-family: Arial;
  font-size: 1.5rem;
  line-height: 150%;
}
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 1em;
}
.container h1 {
  font-size: 2.2rem;
}
.container .instruction {
  font-size: 1.8rem;
  margin-bottom: 4rem;
  font-style: italic;
}
.content {
  margin-bottom: 4em;
}
.content p {
  display: inline;
  background-repeat: no-repeat;
  transition: all 500ms ease-in-out;
}
.v1 p {
  background-position: bottom left;
  background-size: 0% 5px;
  background-image: linear-gradient(#d63031, #d63031);
  padding-bottom: 5px;
}
.v1:hover p {
  background-size: 100% 5px;
}
.v2 p {
  background-position: left;
  background-size: 0% 100%;
  background-image: linear-gradient(#55efc4, #55efc4);
}
.v2:hover p {
  background-size: 100% 100%;
}
.v3 p {
  color: transparent;
  background-position: right;
  background-size: 100% 100%;
  background-image: linear-gradient(#0984e3, #0984e3);
}
.v3:hover p {
  color: #000;
  background-size: 0% 100%;
}
.v4 p {
  background-position: bottom left;
  background-size: 0% 3px;
  background-image: repeating-linear-gradient(to right, #4834d4 0 3px, transparent 0 6px);
  padding-bottom: 3px;
}
.v4:hover p {
  background-size: 100% 3px;
}
.v5 p {
  background-position: center left;
  background-size: 100% 3px;
  background-image: linear-gradient(to right, #000, #000);
  padding-bottom: 3px;
}
.v5:hover p {
  background-size: 100% 100%;
  color: #fff;
  background-image: linear-gradient(to right, #d63031, #d63031);
}
.v6 p {
  background-position: center left;
  background-size: 100% 4px;
  background-image: linear-gradient(to right, #000, #000);
  padding-bottom: 4px;
}
.v6:hover p {
  background-position: bottom left;
  background-size: 100% 2px;
  font-style: italic;
}
.v7 p {
  background-position: left;
  background-size: 0% 100%;
  background-image: linear-gradient(to right, #55efc4, #55efc4);
}
.v7:hover p {
  background-position: right;
  background-size: 100% 100%;
}
.v8 p {
  background-position: left;
  background-size: 0% 100%;
  background-image: linear-gradient(to right, #55efc4, #ff0);
  padding-bottom: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.v8:hover p {
  background-size: 100% 100%;
}