<article>
  <section id="part-one">
    <h1>CodePen Challenge</h1>
    <p>Hover over the title above. You’ll see a link appear. We want you to style that link! The markup for each title and link, just so you know, looks like this: 
    <pre>
    &lt;h1&gt;
      &lt;span&gt;Codepen Challenge&lt;/span&gt;
      &lt;a href="#part-one"&gt;#part-one&lt;/a&gt;
    &lt;/h1&gt;</pre></p>
  <p>Make sure you retain the <a href="https://codepen.io/tag/tutplus/">tutsplus</a> tag on your pen so we can identify it–good luck!</p>
  </section>
  <section id="part-two">
    <h1>Here’s another part of the article</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero consequuntur, voluptatem ducimus eligendi corporis, expedita quidem suscipit beatae harum ab illum autem consectetur aliquid ullam rerum et debitis alias ipsam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam vero porro recusandae, minus possimus dolorum placeat quas nihil quod cumque ipsa ratione magni? Error autem repudiandae incidunt ducimus inventore velit?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam facere suscipit cumque, totam, nisi unde nobis, libero ipsum non ad nostrum eligendi! Saepe quidem beatae, cupiditate rem explicabo repellat. Nulla!</p>
  </section>
  <section id="part-three">
    <h1>Here’s yet one more</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo perferendis dicta voluptas adipisci ratione saepe facere hic deleniti illo ipsa iste cum, incidunt iure eum nobis aliquam, id quod porro.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae blanditiis, expedita deserunt ipsam. Esse nostrum placeat culpa impedit harum, architecto at, inventore quidem aliquam natus nisi libero deleniti nesciunt expedita.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa nulla alias tempore ipsam odio ullam asperiores, eveniet repellat. Impedit laudantium in tempore veniam sed ratione ipsam sint tenetur nisi, officiis.</p>
  </section>
</article>
@import "bourbon";

/* these are some base styles which you can ignore */
body{font:100%/1.5 sans-serif;color: #444;}article{width:90%;margin:0 auto;}pre{background: #f2f2f2;padding:1em 0;}

/* this is where we start styling.. make any changes you like! */

* {
  box-sizing: border-box;
}
@mixin border-radius($w) {
  -webkit-border-radius: $w; 
  -moz-border-radius: $w; 
  border-radius: $w; 
}

@include keyframes(popin) {
  0% {
    top: 50%;
    width: 1px;
    height: 1px;
    padding: 0;
    color: transparent;
    @include transform(translate(0%, -50%));
  }
  40% {
    width: 10px;
    height: 10px;
  }
  80% {
    width: 120px;
    height: 30px;
    padding: 5px 10px;
    color: transparent;
    @include transform(translate(-15px,-50%));
  }
  100% {
    color: white;
  }
}

h1 {
  position: relative;
  display: table-cell;
  padding-right: 120px;
}
h1 a {
  color: white;
  background-color: #ff7c68;
  position: absolute;
  top: 50%;
  opacity: 0;
  text-decoration: none;
  font-size: 14px;
  font-weight: normal;
  white-space: nowrap;
  padding: 5px 10px;
  width: 120px;
  height: 30px;
  text-align: center;
  @include border-radius(30px);
  @include calc(left,'100% - 90px');
  @include transform(translate(-15px,-50%) translateZ(0));
  @include transition(background 250ms);
  
  &:hover {
    background-color:#c15549;
  }
  
  &:before {
    content: "\f08e";
    font: normal normal normal 14px/1 FontAwesome;
    margin-right: 5px;
  }
}
h1:hover a {
  opacity: 1;
  @include animation(popin 0.5s ease-out);
}


$('article section').each(function(i,el){
  var id = $(this).attr('id');
  var h1 = $(this).find('h1').first();
  var t = h1.text();
  h1.html("<span>" + t + "</span>");
  h1.append("<a href='#"+id+"'>#"+id+"</a>");
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js