Pagination

HTML

<ol class=pagination>
    <li class=first><a href=#>First</a></li>
    <li class=prev><a href=#>Previous</a></li>
    <li><a href=#>A</a></li>
    <li><a href=#>B</a></li>
    <li><a href=#>C</a></li>
    <li class=current><a href=#>D</a></li>
    <li><a href=#>E</a></li>
    <li><a href=#>F</a></li>
    <li><a href=#>G</a></li>
    <li><a href=#>H</a></li>
    <li><a href=#>I</a></li>
    <li>J</li>
    <li><a href=#>K</a></li>
    <li><a href=#>L</a></li>
    <li><a href=#>M</a></li>
    <li><a href=#>N</a></li>
    <li><a href=#>O</a></li>
    <li><a href=#>P</a></li>
    <li><a href=#>Q</a></li>
    <li><a href=#>R</a></li>
    <li><a href=#>S</a></li>
    <li><a href=#>T</a></li>
    <li><a href=#>U</a></li>
    <li><a href=#>V</a></li>
    <li><a href=#>W</a></li>
    <li>X</li>
    <li>Y</li>
    <li>Z</li>
    <li class=next><a href=#>Next</a></li>
    <li class=last><a href=#>Last</a></li>
</ol>

CSS

/* Housekeeping */
html{
    font:0.75em/1.5 sans-serif;
}

/* PAGINATION */
.pagination{
    list-style:none;
    margin:0;
    margin-bottom:19px; /* Combined with the 5px margin-bottom on the LIs (defined later) this makes a spacing of 24px */
    padding:0;
    width:100%;
    overflow:hidden; /* Clear floats */
}
    .pagination li,
    .pagination a{
        padding:5px;
    }
    .pagination li{
        float:left;
        border:1px solid #ccc;
        color:#999;
        margin-left:5px;
        margin-bottom:5px;
        
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:2px;
    }
    .pagination li:first-child{
        margin-left:0;
    }
        .pagination a{
            display:block;
            margin:-5px;
            text-decoration:none;
            color:#09f;
        }
        .pagination a:hover,
        .pagination .current a{
            color:#fff;
            background-color:#09f;
        }
    .pagination .current{
        border-color:#09f;
    }
        .pagination .current a{
            font-weight:bold;
            text-decoration:underline;
            cursor:text;
        }
    .first a:before{
        content:"« ";
    }
    .last a:after{
        content:" »";
    }