<article>
  <section id="part-one">
    <h1>CodePen Challenge</h1><i class="fa fa-link"></i>
    <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>
    <span class="h1">&lt;h1&gt;<span>
      <span class="span">&lt;span&gt;<span><span class="p">Codepen Challenge</span><span class="span">&lt;/span&gt;<span>
      &lt;a href="#part-one"&gt;<span class="p">#part-one</span>&lt;/a&gt;
    <span class="h1">&lt;/h1&gt;<span></pre>
    </p>
  <p>Make sure you retain the <a href="https://codepen.io/tag/tutplus/" class="link">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>
    <i class="fa fa-link"></i>
    <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>
    <i class="fa fa-link"></i>
    <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 'Source Code Pro', sans-serif
  color: #716C68
  box-sizing: border-box
  margin: 50px 0
  +user-select(none)
  background: #f8f8f8
    
article
  width: 650px
  margin: 0 auto
  
section
  background: white
  padding: 10px 20px
  margin-bottom: 20px
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.15)
  border-radius: 2px
  position: relative
  z-index: 101

pre
  background: #f6f6f6
  padding: 1em 0
  
p
  text-indent: 1em

/* this is where we start styling.. make any changes you like! */
h1
  display: inline-block
  font-size: 16px
  cursor: pointer
  color: #4B4B4D
  +transition(all .15s $ease-in-quad)
  
  &:hover
    color: white
  
  a
    opacity: 0
    text-decoration: none
    color: white
    +transition(all .35s $ease-in-quad)
    font:
      weight: 400
      size: 16px
    padding: 20px 0
    z-index: 100
    text-align: center
    +position(absolute, 0 0 null 0)
    box-shadow: inset 0 0 0 0 #D8CDBD
    
    &:hover
      box-shadow: inset 650px 0 0 0 #D8CDBD
      color: white
      opacity: 1
  
.h1
  color: #cd8500 
 
.span
  color: #99C2A2
  
.p
  color: #999
  
.link
  color: #D8CDBD
  
.fa-link
  font-size: 14px
  display: inline-block
  padding: 0 0 0 5px
View Compiled
$('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+"&nbsp; &#187;</a>");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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