How to Animate Bullets in Lists using CSS

CSS Web Development Front End Technology

To style bullets in an unordered list, we can use the list-style por

Syntax

The syntax of CSS li-style property as follows −

li {
   list-style: /*value*/
}

Example

The following examples illustrate CSS li-style property.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         li {
            margin: 3px 0;
            padding: 2%;
            width: 28%;
            line-height: 1.2%;
            list-style: none;
            border-radius: 5% 0 0 5%;
            box-shadow: -10px 2px 4px 0 chartreuse;
            color: cornflowerblue;
         }
         li:hover {
            box-shadow: -10px 2px 4px 0 blue!important;
            font-size: 1.4em;
         }
      </style>
   </head>
   <body>
      <ul>
         <li>a</li>
         <li>b</li>
         <li>c</li>
         <li>d</li>
      </ul>
   </body>
</html>

This gives the following output

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         ol {
            list-style: none;
            counter-reset: li;
            overflow: hidden;
         }
         li {
            margin-right: 10%;
            padding: 2%;
            width: 15%;
            float: left;
            line-height: 1.2%;
            font-weight: bold;
            counter-increment: li;
            box-shadow: inset 2px 14px 10px lightblue;
         }
         li:hover {
            box-shadow: inset 6px 14px 10px lightgreen!important;
            font-size: 1.4em;
         }
         li::before {
            content: counter(li);
            color: seagreen;
            display: inline-block;
            width: 40%;
            margin-left: -2em;
         }
      </style>
   </head>
   <body>
      <ol>
         <li>a</li>
         <li>b</li>
         <li>c</li>
      </ol>
   </body>
</html>

This gives the following output