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

  h1 HIGHLIGHT 📝
  .content.v2
    p Lorem ipsum dolor sit amet. Qui recusandae itaque et suscipit neque et corrupti beatae aut quas officia quo placeat nobis eos expedita odit est vitae culpa? Et porro consequatur id culpa iusto ut architecto nesciunt.
    
  h1 SPOILERS 💩
  .content.v3
    p Qui beatae autem et saepe earum et eligendi quia qui Quis saepe ea maiores omnis et ratione saepe. Quo commodi amet ea mollitia nisi est inventore nemo ut voluptate nostrum aut assumenda vero.
    
  h1 UNDERLINE 🍧
  .content.v1
    p Est doloribus doloremque et debitis autem aut reiciendis voluptas 33 distinctio qui blanditiis odio! Et sequi quod est dolorem dolores et quam atque quo veniam unde et Quis adipisci qui dicta porro.
    
  h1 DASHES 😎
  .content.v4
    p Id optio Quis sit repellat obcaecati et sunt eius ut aspernatur quia aut nobis quas sit voluptatem fugiat. Ut alias magni qui nobis consequatur qui enim velit.
    
  h1 DELETED 🙈
  .content.v5
    p Aut commodi ratione ut facilis dolore et autem itaque. Ut omnis unde hic labore explicabo ut quaerat officiis. Et quisquam blanditiis et saepe aspernatur ut nesciunt architecto in nulla soluta in dolorem laborum quo nulla enim! 
    
  h1 DELETED 🙈2 
  .content.v6
    p Ut aspernatur minus a provident dolorem qui temporibus iure non voluptas labore? Quo Quis velit qui magni minus non odit voluptatem eum veritatis quidem ut dolores error sit omnis libero.
    
  h1 CRAZY LINES 🤡
  .content.v7
    p Et quidem soluta eos rerum aspernatur ut earum unde nam deserunt Quis et quidem numquam qui atque laudantium. In magni rerum est possimus praesentium ea alias tempora
    
  h1 GRADIENT SWIPE 🎨
  .content.v8
    p assumenda odio alias modi et nihil tempora ut corporis officiis. Et dolorum vero ut unde repellat rem possimus dignissimos id modi dolor cum laudantium voluptatem et soluta internos. Id odio enim vel quasi nesciunt qui
    

yellow  = #f6e05e
red     = #e53e3e
grey    = #a0aec0
purple  = #4834d4
  
body
  font-family   Arial
  font-size     1.5rem
  line-height   150%
  background #edf2f7
  color #2d3748
  
.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(yellow, yellow)
  &:hover
    p
      background-size: 100% 100%

      
// SPOILERS ------------------------------------------
.v3
  p
    color transparent
    background-position right
    background-size 100% 100%
    background-image linear-gradient(grey, grey)
  &: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, yellow, yellow)
  &: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, #9ae6b4, yellow)
    padding-bottom thickness
    box-decoration-break clone
    -webkit-box-decoration-break clone
  &:hover
    p
      background-size 100% 100%