HTML Ordered List With Custom CSS Styling Simplified

Here is an example of an HTML numbered ordered list with colored background items and a hover effect all implemented with simple CSS directives:

1. Aptent eleifend vulputate, in nunc. Lobortis fermentum est fusce cursus dictumst commodo, feugiat. Enim laoreet taciti integer habitasse sed proin. Dui metus magna.
2. Maecenas habitant phasellus nunc. Sollicitudin ac curabitur hac pellentesque maecenas pretium proin ullamcorper ullamcorper. Sociis platea dis vehicula pede sapien ultricies.
3. Integer. Ante turpis, euismod velit a lacinia pede sapien rhoncus at dictum est sed imperdiet proin nulla, netus penatibus aptent at.
4. Pellentesque ultrices massa feugiat eget mauris class elementum aliquet, ultricies nisi consectetuer maecenas praesent inceptos mauris fames posuere.
5. Id taciti auctor nibh primis phasellus eleifend magna leo scelerisque condimentum, quis, donec. Mollis sit neque fermentum.

Here are the CSS directives that produce the styling and hover effects above:

.list-ordered-left-numbers-hover
{
  list-style-type: none;
  margin: 0;
  margin-left: 3em;
  padding: 0;
  counter-reset: li-counter;
}
.list-ordered-left-numbers-hover > li
{
  position: relative;
  margin-bottom: 20px;
  padding: 1em 1em 1em 2em;
  background-color: #f5f5f5;
  box-shadow: inset 0.5em 0 #898989;  
  -moz-transition: box-shadow 1s;
  -o-transition: box-shadow 1s;
  -ms-transition: box-shadow 1s;
  -webkit-transition: box-shadow 1s;
  transition: box-shadow 1s;      
}

.list-ordered-left-numbers-hover > li:hover
{
  box-shadow: inset 1.5em 0 #898989;
}

.list-ordered-left-numbers-hover > li:before 
{
  position: absolute;
  top: 0.60em;
  left: -1.25em;
  width: 1em;
  font-size: 3em;
  line-height: 1;
  font-weight: bold;
  text-align: right;
  color: #464646;
   
  overflow: hidden;
  content: counter(li-counter);
  counter-increment: li-counter;
}