<article>
  <p><a href="http://factmag.com/tag/kanye-west" target="_blank"><strong>Kanye West</strong></a> performed at the first annual Roc City Classic tonight in New York City, an event streamed on <a href="http://factmag.com/tag/jay-z" target="_blank"><strong>Jay Z</strong></a>‘s <em>Life+Times</em> website that&nbsp;also featured NBA star&nbsp;Kevin Durant.</p>
  <p>Kanye’s set&nbsp;consisted predominantly of material from 2013’s <em>Yeezus</em> album, however he also performed ‘Clique,’ ‘Blessings,’ ‘I Don’t Fuck With You’ and ‘Mercy’ with the <a href="http://factmag.com/tag/g-o-o-d-music" target="_blank"><strong>G.O.O.D. Music</strong></a> crew&nbsp;before wrapping things up with his latest single ‘Only One’.</p>
  <p>Earlier today, Kanye debuted a new track entitled <a href="http://www.factmag.com/2015/02/12/kanye-west-premieres-wolves-featuring-sia-vic-mensa-produced-cashmere-cat-sinjin-hawke/" target="_blank"><strong>‘Wolves’</strong></a> featuring&nbsp;<strong><a href="http://factmag.com/tag/sia" target="_blank">Sia</a>&nbsp;</strong>and <a href="http://factmag.com/tag/vic-mensa" target="_blank"><b>Vic Mensa</b></a>. [via <a href="http://pitchfork.com/news/58459-kanye-west-performs-at-first-annual-roc-city-classic/" target="_blank"><strong><em>Pitchfork</em></strong></a>]</p>
  <p class="note">This is a recreation of the link hover effect from <a href="http://www.factmag.com/2015/02/13/kanye-west-pusha-t-2-chainz-perform-first-annual-roc-city-classic-watch-full-show/">factmag.com</a></small>
</article>
@import "compass/css3";

/* Link hover effect from http://www.factmag.com/2015/02/13/kanye-west-pusha-t-2-chainz-perform-first-annual-roc-city-classic-watch-full-show/ */

@import url(https://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic);

$link-color: #E71818;
$text-color: #442;
$article-font: Noto serif, serif;

article {
  color: $text-color;
  font-family: $article-font;
  margin: 5em auto;
  max-width: 30em;
}
p {
  font-size: 18px;
  line-height: 1.5;
}
article a {
  @extend %fancy-link;
}
.note {
  display: inline-block;
  border-top: 1px solid $link-color;
  color: #777;
  font-size: .8em;
  font-style: italic;
  margin-top: 2em;
  padding-top: 1em;
}
%fancy-link {
  color: $link-color;
  position: relative;
  text-decoration: none;
  transition: all 0.15s ease-out;
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0px;
    left: 0;
    background: #f00;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }
  &:hover {
    transition: all 0.15s ease-out;
    &:before {
        visibility: visible;
        transform: scaleX(1);
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.