https://www.rakeshmgs.in/search/label/Template
https://www.rakeshmgs.in


RakeshMgs

HTML Code for List Style | Ordered List Style CSS and HTML

Updated:

<!DOCTYPE html>
<html>

<head>
 <style>
  .list-type1 {
   width: 400px;
   margin: 0 auto;
  }
 
  .list-type1 ol {
   counter-reset: li;
   list-style: none;
   *list-style: decimal;
   font-size: 15px;
   font-family: 'Raleway', sans-serif;
   padding: 0;
   margin-bottom: 4em;
  }
 
  .list-type1 ol ol {
   margin: 0 0 0 2em;
  }
 
  .list-type1 a {
   position: relative;
   display: block;
   padding: .4em .4em .4em 2em;
   *padding: .4em;
   margin: .5em 0;
   background: #93C775;
   color: #000;
   text-decoration: none;
   -moz-border-radius: .3em;
   -webkit-border-radius: .3em;
   border-radius: 10em;
   transition: all .2s ease-in-out;
  }
 
  .list-type1 a:hover {
   background: #d6d4d4;
   text-decoration: none;
   transform: scale(1.1);
  }
 
  .list-type1 a:before {
   content: counter(li);
   counter-increment: li;
   position: absolute;
   left: -1.3em;
   top: 50%;
   margin-top: -1.3em;
   background: #93C775;
   height: 2em;
   width: 2em;
   line-height: 2em;
   border: .3em solid #fff;
   text-align: center;
   font-weight: bold;
   -moz-border-radius: 2em;
   -webkit-border-radius: 2em;
   border-radius: 2em;
   color: #FFF;
  }
 </style>
</head>

<body>
 <div class="list-type1">
  <ol>
   <li><a href="#">This is the list 1</a></li>
   <li><a href="#">This is the list 2</a></li>
   <li><a href="#">This is the list 3</a></li>
   <li><a href="#">This is the list 4</a></li>
   <li><a href="#">This is the list 5</a></li>
   <li><a href="#">This is the list 6</a></li>
   <li><a href="#">This is the list 7</a></li>
   <li><a href="#">This is the list 8</a></li>
   <li><a href="#">This is the list 9</a></li>
   <li><a href="#">This is the list 10</a></li>
   <li><a href="#">This is the list 11</a></li>
   <li><a href="#">This is the list 12</a></li>
   <li><a href="#">This is the list 13</a></li>
  </ol>
 </div>
</body>

</html>











  1. This is the list 1
  2. This is the list 2
  3. This is the list 3
  4. This is the list 4
  5. This is the list 5
  6. This is the list 6
  7. This is the list 7
  8. This is the list 8
  9. This is the list 9
  10. This is the list 10
  11. This is the list 11
  12. This is the list 12
  13. This is the list 13



Home HTML Codes HTML Code for List Style | Ordered List Style CSS and HTML

Admin

Rakesh Kumar

2 Comments

आपको आर्टिकल कैसा लगा? अपनी राय अवश्य दें
Please don't Add spam links,
if you want backlinks from my blog contact me on rakeshmgs.in@gmail.com
Emoticon