CSS Counter

by Kheema Pandey

HTML

<div id="test">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="result"></div>

 <div>
<ul>
  <li>
    <h2>
      some text
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestiae ab impedit assumenda aut magni tenetur nulla deserunt? Saepe consectetur obcaecati laboriosam excepturi voluptate nam sit facilis aut laborum quo?</p>
  </li>
  <li>
    <h2>
      some text
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestiae ab impedit assumenda aut magni tenetur nulla deserunt? Saepe consectetur obcaecati laboriosam excepturi voluptate nam sit facilis aut laborum quo?</p>
  </li>
  <li>
    <h2>
      some text
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestiae ab impedit assumenda aut magni tenetur nulla deserunt? Saepe consectetur obcaecati laboriosam excepturi voluptate nam sit facilis aut laborum quo?</p>
  </li>
  <li>
    <h2>
      some text
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestiae ab impedit assumenda aut magni tenetur nulla deserunt? Saepe consectetur obcaecati laboriosam excepturi voluptate nam sit facilis aut laborum quo?</p>
  </li>
  <li>
    <h2>
      some text
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestiae ab impedit assumenda aut magni tenetur nulla deserunt? Saepe consectetur obcaecati laboriosam excepturi voluptate nam sit facilis aut laborum quo?</p>
  </li>
  <li>
    <h2>
      some text
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestiae ab impedit assumenda aut magni tenetur nulla deserunt? Saepe consectetur obcaecati laboriosam excepturi voluptate nam sit facilis aut laborum quo?</p>
  </li>
   <li>
    <h2>
      some text
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestiae ab impedit assumenda aut magni...

CSS

#test {counter-reset:test;}
#test > div {counter-increment:test;}
#result:before {content:counter(test);}

body {
    counter-reset: test; 
   }
div {width: 960px; background: #ddd; margin:0 auto;}
ul {width: 500px;}
li {
  list-style:outside none;
  position: relative;
  left: 100px;
}
li:before {
  position: absolute;
  left:-10%;
  counter-increment: test; 
    content:  counter(test) "";
  border: 3px solid blue;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  line-height: 10px;
  padding: 10px;
  font-size:15px;
  background-color:#ffffff;
}
li:after {
  position: absolute;
  content:"";
  width: 3px;
  height: 100%;
  display:block;
  left:-33px;
  top:33px;
  background: blue;
}
li:last-child:after {
  display:none;
}