<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 "nib"

@import url('//fonts.googleapis.com/css?family=Raleway:400,700')
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css')

$px = ( 1 / 16 ) rem
$tri_v = 8*$px
$tri_h = 10*$px
$tip_bg = #007bff
$tip_txt = white

/* these are some base styles which you can ignore */
body{font-family:Raleway;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! */

h1
  position relative
  display inline-block
  a
    font-size 0.4em
    margin-left 1.618em
    display inline-block
    vertical-align bottom
    margin-bottom 0.4em
    text-decoration none
    text-transform uppercase
    font-weight 400
    background white
    color #888
    border 1*$px dashed lighten(@color, 60%)
    padding 0.3em 0.7em
    &::selection
      background @background
      color @color
    &::before
      font-family "FontAwesome"
      content '\f0c1'
      position relative
      display inline-block
      background @background
      color lighten(@color, 15%)
      font-size 0.9em
      padding-right 0.75em
      margin-right -0.75em
  &::before, &::after
      opacity 0
      transition all 0.25s ease-in
  &::before
    content ''
    border-style solid
    border-width $tri_v $tri_h $tri_v 0
    border-color transparent $tip_bg transparent transparent
    position absolute
    left 100%
    bottom $tri_v
    width 0
    height 0
  &::after
    content "Right click, copy link for sharing"
    display block
    position absolute
    left 100%
    bottom -50%
    width 100 * $px
    padding 1em
    margin-left $tri_h
    margin-bottom $tri_v
    font-size 0.4em
    font-weight normal
    background $tip_bg
    border-radius 1em
    color $tip_txt
  &:hover
    &::before, &::after
      opacity 1
      transform translateX($tri_h)
      transition all 0.25s 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

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