Weblog navigation

by RzaaL1306

HTML

<nav class="prev-next clearfix fixed" role="navigation">
    <p class="post-prev"><a href="http://joshnh.com/2012/02/a-collection-of-css-snippets-for-sublime-text-2/">Previous previous previous</a></p><!--
 --><p class="post-next"><a href="http://joshnh.com/2012/02/pure-css-icons/">Next</a></p>
</nav>

CSS

body {
    padding: 50px;
}
nav.prev-next {
    background: #EEE;
    margin: 3.6em -1.8em 1.8em;
    min-height: 1.8em;
    overflow: hidden;
    padding: 1.8em 3.6em;
    position: relative;
}
nav.prev-next:after,
nav.prev-next:before {
    background-color: #fff;
    background-position: 0 100%, 0 0;
    background-repeat: no-repeat;
    background-size: 2.7em 2.7em;
    bottom: 0;
    content: '';
    position: absolute;
    top: 0;
    width: 3.6em;
}
nav.prev-next:after {
    background-image: -webkit-linear-gradient(45deg, #eee 50%, #fff 50%),
                      -webkit-linear-gradient(-45deg, #eee 50%, #fff 50%);
    left: 0;
}
nav.prev-next:before {
    background-image: -webkit-linear-gradient(-45deg, #fff 50%, #eee 50%),
                      -webkit-linear-gradient(45deg, #fff 50%, #eee 50%);
    right: 0;
}
nav.prev-next p {
    color: #555;
    display: inline-block;
    font: 1em/1.8 Ratio, sans-serif;
    width: 50%;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
nav.prev-next p.post-prev {
    padding-right: 1.8em;
}
nav.prev-next p.post-next {
    padding-left: 1.8em;
    text-align: right;
}
nav.prev-next a {
    background: #fff;
    color: #555;
    display: block;
    text-decoration: none;
}
nav.prev-next a:hover {
    color: #6cf;
}