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

Hindi Notes

RakeshMgs

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

रविवार, मई 17, 2020
<!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>