HTML CSS examples for CSS Widget:UL Element
Style Ordered list index number on li rollover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ol.testing {<!--from w ww. j a v a 2 s .c o m--> counter-reset:li; margin:0 0 0 46px; } ol.testing>li { position:relative; margin:0 0 31px 3em; padding:4px 9px; list-style:none; } ol.testing>li:before { content:counter(li); counter-increment:li; position:absolute; top:-3px; left:-3em; font-size:16px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; width:3em; margin-right:9px; padding:5px; color:Chartreuse; background:yellow; font-weight:bold; text-align:center; } ol li:hover:before { color:blue; } </style> </head> <body> <ol class="testing"> <li>Lorem ipsum d</li> <li>Lorem ipsum d</li> <li>Lorem ipsum d</li> </ol> </body> </html>