Faux Ordered Lists

Simple CSS-only method to style the pesky <OL>

HTML

<div id="page-wrap">
<h1>Numbered FAQ</h1>
<ul class="faq">
    <li>Why are manhole covers round?</li>
    <li>What is the air-speed velocity of an unladen swallow?</li>
</ul>
</div>

CSS

.faq {
    counter-reset: my-badass-counter;
}
.faq li {
    position: relative;
    font: bold 16px Georgia;
    padding: 4px 0 10px 0;
    margin-bottom:20px;
}
.faq li:before {
    content: counter(my-badass-counter);
    counter-increment: my-badass-counter;
    position: absolute;
    left: 0;
    top: -10px;
    font: bold 50px/1.5 Sans-Serif;
}
.faq ul {
    margin: 0 0 50px 0;
}	
.faq li, .faq ul {
    padding-left: 50px;
}