CSSPortal Playground Examples

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
.au {
  display:inline-block;
  border:1px solid #ccc;
  background:#f2f2f2;
  border-radius:10px;
  box-shadow:2px 2px 2px #888;
  padding:10px; 
  margin:50px;
}
ol {
  list-style:none;
  counter-reset:mycounter;
  padding:0;
}
ol li {
  position:relative; 
  margin-left: 30px;
  padding:5px 0;
}
ol li:before {
  content:counter(mycounter); 
  counter-increment:mycounter;
  position:absolute;
  top:0;
  left:-30px;
  width:25px;height:25px;line-height:25px;
  border-radius:50%;
  color:#fff;
  background:teal;
  text-align:center;
}
    </style>
  </head>
  <body>
	<div class="au">
	<h2>States in Australia</h2>
		<ol>
		  <li>New South Wales</li>
		  <li>Victoria</li>
		  <li>South Australia</li>
		  <li>Western Australia</li>
		  <li>Queensland</li>      
		  <li>Tasmania</li>      
		</ol>
	<h2>Territories in Australia</h2>
		<ol>
		  <li>Northern Territory</li>
		  <li>Australian Capital Territory</li>
		</ol>
	</div>
  </body>
</html>