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
Page Views

This page has been viewed 164 times.

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
There is a qualitative and quantitative difference between a day that begins with a little exercise, a book, meditation, a good meal, a thoughtful walk, and the start of a day that begins with a smartphone in bed.
Unknown