CodePen

HTML

            
              	<div>
    <p>This is a paragraph of text.</p>
	  <ol>
      	<li>This is a list item<br>
	      	Continuation of list item.
    	  </li>
    	  <li>This is a list item<br>
	      	Continuation of list item.
    	  </li>
    	  <li>This is a list item<br>
	      	Continuation of list item.
    	  </li>
    	  <li>This is a list item<br>
	      	Continuation of list item.
    	  </li>
    	  <li>This is a list item<br>
	      	Continuation of list item.
    	  </li>
    	  <li>This is a list item<br>
	      	Continuation of list item.
    	  </li>
    	  <li>This is a list item<br>
	      	Continuation of list item.
    	  </li>
    	  <li>This is a list item<br>
	      	Continuation of list item.
    	  </li>
    	  <li>This is a list item<br>
	      	Continuation of list item.
    	  </li>
    </ol>
    <p>A paragraph in the middle</p>
    <ol>
    	  <li value="34">This is a list item<br>
	      	Continuation of list item.
    	  </li>
    	  <li>This is a list item<br>
	      	Continuation of list item.
    	  </li>
    	  <li>This is a list item<br>
	    	  Continuation of list item.
    	  </li>
	  </ol>
	  <p>This is a paragraph of text.</p>
 </div>

            
          
!

CSS

            
              p, ol {margin: 0; padding: 0; list-style-type: none;}
	
li {
	    padding-left: 30px;
	    counter-increment: nums; 
	    position: relative;
}
	
li:before {
	    content: counter(nums);
	    position: absolute;
	    left: 0px;
}

div {
  padding-left: 50px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................