Filling in the background-color of an ol list-item - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-color

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background-color

Description

Filling in the background-color of an ol list-item

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

li {<!--from w w  w.ja v a2  s.  c  om-->
   padding: 10px 0;
   margin: 10px 0;
   color: #ccc;
   padding-left: 26px;
   border-left: 5px solid transparent;
}
li a {
   color: #ccc;
   text-decoration: none;
}
.active {
   position: relative;
   background-color: blue;
   color: #333;
   border-left: 5px solid red;
}
.active a {
   color: #333;
}
ol {
   list-style-type: decimal-leading-zero;
   list-style-position: inside;
   padding: 0;
}


      </style> 
 </head> 
 <body translate="no"> 
  <ol class="meny-control"> 
   <li class="active"> <a href="">Abc</a> </li> 
   <li> <a href="">Facebook</a> </li> 
   <li> <a href="">SQL</a> </li> 
   <li> <a href="">Cooking</a> </li> 
   <li> <a href="">Food</a> </li> 
  </ol>  
 </body>
</html>

Related Tutorials