Amazing List Style with Counter Pure CSS

List Style with Counter Pure CSS

Lists are very important elements of a website and are used to list up items there are two types of lists that are ordered list and un-ordered lists today in this article i will teach you how toy can customize these list styles.

By default lists have no style but you can customize them according to your requirements. In this article we will see how we can customize ordered list style with counter. So we will do it in blogger you can also use this code in wordpress site it will also works there.

So you can see the demo of this list styles in the thumbnail of this article it look very beautiful you can change the colors according to you requirements.

So bow lets add this in blogger website it's so simple you can easily do that so lets do it together. At first i was thinking to implement this style in my blogger blogger but it was creating some issues so that's why i haven't used it.

Steps to follow:

  1. Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Click Edit HTML
  4. Now Search for </head>
  5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  6. Just before the ending header tag you have to paste the code which is provided below you can copy it by clicking on it.
  7. <style>
    ol {
      counter-reset: li;
      list-style: none;
      *list-style: decimal;
      font: 15px "trebuchet MS", "lucida sans";
      padding: 0;
      margin-bottom: 4em;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
      margin-left: -5px;
      margin-top: 0px;
      margin-bottom: 0px;
    ol {
      margin: 0 0 0 2em;
    /* -------------------------------------- */
    ol li {
      position: relative;
      display: block;
      padding: 0.4em 0.4em 0.4em 2em;
      *padding: 0.4em;
      margin: 0.5em 0;
      background: #ddd;
      color: #444;
      text-decoration: none;
      -moz-border-radius: 0.3em;
      -webkit-border-radius: 0.3em;
      border-radius: 0.3em;
      -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    ol ali:hover {
      background: #eee;
    ol li:hover:before {
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    ol li:before {
      content: counter(li);
      counter-increment: li;
      position: absolute;
      left: -1.3em;
      top: 50%;
      margin-top: -1.3em;
      background: #fdd761;
      height: 2em;
      width: 2em;
      line-height: 2em;
      border: 0.3em solid #fff;
      text-align: center;
      font-weight: bold;
      -moz-border-radius: 2em;
      -webkit-border-radius: 2em;
      border-radius: 2em;
      -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    /* -------------------------------------- */
  8. Save Theme/Template

That's it you have just done that you don't need to add any class or any id to add in that lists. Whenever you create a list in your blogger blog your list will be transformed to this style you can go and check that simple create a new post and create table in it then publish your post and view it.


That was the thing that i want to share with you in today's article i thing that it may helped you. My main aim behind creating this website was to share all my knowledge with you gyz whatever i have learned in my life.

You have just customized you list style on your website by following this article if you want anything else comment below or if you face any problem comment section is there you can leave your feedback there that's free.

So Good Luck and keep Learning, Creating & visiting this site.


Help us improve this article by leaving your feedback below.
  1. bro how to make alert notification with timing while copying codes can you make a post of it?

    1. Ok Dear I will try to write post on this topic next time.

Previous Post Next Post