<main>
  <header>
    <h1>Ordered List without the Period?</h1>
    <p>Working example based on StackOverflow <a href="https://stackoverflow.com/questions/5945161/html-css-ordered-list-without-the-period" target="_blank">Question/Answer</a></p>
  </header>
  <section>
    <p>First 21 numbers in Portuguese:</p>
    
    <!--  EXAMPLE -->
    <ol>
      <li>Um</li>
      <li>Dois</li>
      <li>Três</li>
      <li>Quatro</li>
      <li>Cinco</li>
      <li>Seis</li>
      <li>Sete</li>
      <li>Oito</li>
      <li>Nove</li>
      <li>Dez</li>
      <li>Onze</li>
      <li>Doze</li>
      <li>Treze</li>
      <li>Quatorze</li>
      <li>Quinze</li>
      <li>Dezesseis</li>
      <li>Dezessete</li>
      <li>Dezoito</li>
      <li>Dezenove</li>
      <li>Vinte</li>
      <li>Vinte e um</li>
    </ol>
    <!--  /EXAMPLE -->
    
  </section>

  <footer>
    <h2>Refs:</h2>
    <ul>
      <li><a href="https://stackoverflow.com/questions/5945161/html-css-ordered-list-without-the-period">https://stackoverflow.com/questions/5945161/html-css-ordered-list-without-the-period</a></li>
      <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type">https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type</a></li>
      <li><a href="https://css-tricks.com/numbering-in-style/">https://css-tricks.com/numbering-in-style</a></li>
    </ul>
  </footer>
 </main>
// Example
// -- -- --

ol {
  list-style-type: none;
  margin: 0;
  color: grey;

    *list-style-type: decimal-leading-zero; 
    /* targets IE6 and IE7 only */
    
    & > li {
      counter-increment: customlistcounter;

        &::before {
          content: counter(customlistcounter, decimal-leading-zero) " ";
          color: red;
          float: left;
          width: 30px;
        }

        &:nth-child(1) {
          counter-reset: customlistcounter;
        }
    }
}

// End of the Example
// -- -- --
// -- -- --

@import url('https://fonts.googleapis.com/css?family=Lora:700i|Noto+Sans+SC:300');

body, html {
  padding: 0;
  margin: 0;
  background: Gainsboro;
  height: 100%;
  width: 100%;
  display: block;
}

main {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

section {
  padding: 20px;
  color: DimGray;
}

header {
  background: white;
  padding: 20px;
  
  h1 {
    color: red;
    font-family: 'Lora', serif;
  }
  
  p {
    text-size: 12px;
    color: gray;
    
    a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px dotted;
      
      &:hover {
        border-bottom: 1px dotted red;
      }
    }
  }
}

footer {
  background: SlateGray;
  padding: 20px 10px;
  
  h2 {
    font-size: 14px;
    font-family: 'Lora', serif;
  }
  
  ul {
    list-style: armenian;
    
    li {
      margin: 10px 0;
      font-size: 12px;
      
      a {
        color: inherit;
        
        &:hover {
          text-decoration: none;
        }
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.