How To Style Beautiful HTML Lists With CSS

With CSS you can create beautiful webpages. In this post, I am going to share a quick tip to style HTML lists.

Simply add following code in your style.css file.

  ul, ol{
        /*margin: 0;padding: 0;*/
        list-style: none;
    }
    li {
        background: #37BC9B;
        color: #fff;
        counter-increment: myCounter;
        margin: 0 0 30px 0;
        padding: 13px;
        position: relative;
        top: 1em;
        border-radius:  0em 2px 1em 1em;
        padding-left: 2em;
        font-size: 1.2em;
        font-family: Constantia;
    }
    li:before{
        content: counter(myCounter, decimal-leading-zero);
        display: inline-block;
        text-align: center;
        font-size: 2em;
        line-height: 1.3em;
        background-color:  #48CFAD;
        padding: 10px;
        font-weight: bold;
        position: absolute; 
        top: 0;
        left: -40px;
        border-radius: 50%;
        font-family: exo;
    }


    li:nth-child(even){
        background-color: #434A54;
    }

Now create a ordered or unordered list on yor page.

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Non eveniet hic architecto quasi!</li>
    <li>Porro doloremque ex, necessitatibus nesciunt.</li>
    <li>Sequi sapiente molestiae a dolorum!</li>
    <li>Nisi dignissimos porro culpa, enim.</li>
</ul>

You can see the result in screenshot below. A beautiful HTML list.