Chapter quick links css styling

by meetaaronsilber

HTML

<div class="chapter-link chapter2">
    <a href="http://www.google.com">Chapter 2</a>
</div>

<div class="chapter-link chapter3">
    <a>Chapter 3</a>
</div>

<div class="chapter-link chapter4">
    <a>Chapter 4</a>
</div>

<div class="chapter-link chapter5">
    <a>Chapter 5</a>
</div>

CSS

.chapter-link{
    position: fixed;
    right: 20px;
    
    width: 100px;
    height: 40px;
    background: #ac0;
    
    color: #fff;
    border: 2px solid rgba(0,0,0,.1);
}

div.chapter-link:after{
    position: relative;
    left: 100px;
    top: -8px;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid #ac0;
    border-bottom: 5px solid transparent;
}

.chapter2{ top: 25%;}
.chapter3{ top: 50%;}
.chapter4{ top: 76%;}
.chapter5{ top: 91%;}