Numeric List Icons

Written by @kerixa 9 March 2021

Using lists allows us to display information that is all in a same order. The styles increases the beauty of these lists, which is very useful for the websites. In the following code, this beauty is provided by using icon numbers that have a beautiful style and are placed in the list.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
body {
     font-size: 1.2em;
     font-family: "Helvetica Neue", Helvetica, sans-serif;
     margin: 50px;
}
 .custom-counter {
     margin: 0;
     padding: 0;
     list-style-type: none;
}
 .custom-counter li {
     counter-increment: step-counter;
     margin-bottom: 10px;
}
 .custom-counter li::before {
     content: counter(step-counter);
     margin-right: 5px;
     font-size: 80%;
     background-color: rgb(0,200,200);
     color: white;
     font-weight: bold;
     padding: 3px 8px;
     border-radius: 3px;
}
</style>
<ol class="custom-counter">
  <li>This is the first item</li>
  <li>This is the second item</li>
  <li>This is the third item</li>
  <li>This is the fourth item</li>
  <li>This is the fifth item</li>
  <li>This is the sixth item</li>
</ol>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300