List - Pagination

by prasun_sultania

HTML

<ol class="pagination">
    <li><a href="search.htm?page=1" rel="prev">Prev</a></li>
    <li><a href="search.htm?page=1">1</a></li>
    <li class="selected">2</li>
    <li><a href="search.htm?page=3">3</a></li>
    <li><a href="search.htm?page=4">4</a></li>
    <li><a href="search.htm?page=5">5</a></li>
    <li><a href="search.htm?page=3" rel="next">Next</a></li>
</ol>

CSS

ol.pagination {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ol.pagination li {
    float: left;
    /* use margins to make space for floats*/
    margin-right: 0.6em;
}

ol.pagination a, ol.pagination li.selected {
    display: block;
    padding: 0.2em 0.5em;
    border: 1px solid #ccc;
    text-decoration: none;
}

ol.pagination a:hover, ol.pagination a:focus,
ol.pagination li.selected {
background-color: blue;
color: white;
}

/*extra styling for prev and next*/
ol.pagination a[rel="prev"],
ol.pagination a[rel="next"] {
border: none;
}

ol.pagination a[rel="prev"]:before {
content: "\00AB";
padding-right: 0.5em;
}
ol.pagination a[rel="next"]:after {
content: "\00BB";
padding-left: 0.5em;
}