Semantically awesome ordered lists

So if you were ever trying to style an ordered list <ol> and get rid of those pesky periods after the numbers you may have wanted to give up.

Do not give up!

Much better than manually adding the numbers and styling them in a very un-semantic way. Now of course this works in Firefox and Webkit and not much else, but that's okay. I need it for an iPhone app, so we're good!

<style>
nav {
  margin-left: 20px;
  margin-right: 30px;
  color: #666;
 }
  
 ol { counter-reset: item }

 li {
  display: block;
  margin-top: 10px;
 }
 nav ol li span {
  font-family: 'GothamBook', Arial;
  font-size: 1.6em;
 }
 ol li::before {
   content: counter(item) " | ";
   counter-increment: item;
   font-family: 'GothamLight', Arial;
   font-size: 2.2em;
 }
</style>

<nav>
   <ol>
    <li><a href="#">Why mobile?</a> <span>Quotes and figures to astound your clients.</span></li>
    <li><a href="#">Focus.</a>  <span>Using constraints to improve design across the board.</span></li>
    <li><a href="#">Capabilities.</a>  <span>What can mobile phones do now-a-days?</span></li>
    <li><a href="#">Native vs. Web App.</a>  <span>Which is a better fit for your needs?</span></li>
    <li><a href="#">Workflow.</a>  <span>What happens to your app when it comes through our door.</span></li>
    <li><a href="#">Cost.</a> <span>An arm and a ...</span></li>
    <li><a href="#">Know before you start.</a> <span>10 essentials that can save your app.</span></li>
    <li><a href="#">What's on the horizon?</a> <span>Mobile trends to keep in mind.</span></li>
    <li><a href="#">Help me.</a> <span>We’re here to help you with all your Mobile needs..</span></li>
   </ol>
  </nav>

1. Why mobile? Quotes and figures to astound your clients.
2. Focus. Using constraints to improve design across the board.
3. Capabilities. What can mobile phones do now-a-days?
4. Native vs. Web App. Which is a better fit for your needs?
5. Workflow. What happens to your app when it comes through our door.
6. Cost. An arm and a ...
7. Know before you start. 10 essentials that can save your app.
8. What's on the horizon? Mobile trends to keep in mind.
9. Help me. We’re here to help you with all your Mobile needs..

Thank you:

http://efreedom.com/Question/1-3153019/Remove-decimal-from-ordered-ol-list-via-CSS

http://www.w3.org/TR/CSS2/generate.html