Exciting Multi-line Highlights

exciting-multi-line-highlights.markdown

Exciting Multi-line Highlights

Ditch the boring underline, Add some exciting highlights!

A Pen by Manan Tank on CodePen.

License.

index.pug

.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?
    

style.stylus

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%