.post
  a.fun-hover(href="#") Check out React For Beginners

.post
  a.fun-hover(href="#") Are you a Sublime Text Power User?

br

.post
  a.fun-hover(href="#") I love to learn!

.post
  a.fun-hover(href="#") I <br>sure<br>do<br>love<br>Flexbox! 
View Compiled
yellow = #FEE603
black = #1E1F23
mint = #25B0A9

html
  font-size 10px
  font-family 'Bangers'

.post
  max-width 30rem
  margin 2rem
  float left
a
  font-size 4rem
  text-decoration none
  color black
  text-shadow 1px 1px 0 alpha(white,0.4)
  
// Get Going!
.fun-hover
  background-image linear-gradient(to right, mint 50%, yellow 50%)
  background-position 0
  // make the background twice as big
  background-size 200%
  transition all 0.4s
  &:hover
    background-position -100%

External CSS

  1. https://fonts.googleapis.com/css?family=Bangers

External JavaScript

This Pen doesn't use any external JavaScript resources.