adding pulsating dots to your css ul li list

get rid of those boring dots in your list and add some pulsation!

See the Pen Pulsate your <ul><li> list item dots! by Luke (@kruxor) on CodePen.

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;}
}
    a boring list
  • list item
  • list item
  • list item
    a pulsation list
  • list item
  • list item
  • list item

Other Items in css
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
Be Yourself, Back Yourself
Kristie Bennett, Survivor