adding pulsating dots to your css ul li list

HTML

<ul>a boring list
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>

<ul class='pulsate-me'>a pulsation list
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>

CSS

ul.pulsate-me {
 list-style:none;
 margin:0;
 padding:0;
}
ul.pulsate-me li {
 margin:0;
 padding:0;
}
ul.pulsate-me li:after {
    content: " ";
    height: 10px;
    width: 10px;
    background: #F00;
    border-radius: 20px;
    position: absolute;
    top: 15px;
    left: -12px;
    opacity: 0.5;
}
ul.pulsate-me li:before {
    content: " ";
    height: 15px;
    width: 15px;
    background: #F00;
    border-radius: 20px;
    position: absolute;
    top: 13px;
    left: -15px;
		-webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
  opacity: 0.8;
}
ul.pulsate-me li {
		position:relative;
    padding: 10px 5px;
    margin: 0 0 0px 10px;
    font-size: 16px;  
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}