HTML CSS examples for CSS Widget:UL Element
style the number on a html list
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ol {<!-- w w w. j av a 2 s . com--> counter-reset:li; margin-left:0; padding-left:0; } ol>li { position:relative; margin:0 0 7px 3em; padding:5px 9px; list-style:none; border-top:3px solid Chartreuse; background:yellow; } ol>li:before { content:counter(li); counter-increment:li; position:absolute; top:-3px; left:-3em; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; width:3em; margin-right:9px; padding:5px; border-top:3px solid blue; color:pink; background:OrangeRed; font-weight:bold; font-family:"Helvetica Neue", Arial, sans-serif; text-align:center; } li ol, li ul { margin-top:7px; } ol ol li:last-child { margin-bottom:0; } </style> </head> <body> <ol> <li>Lorem </li> <li>Lorem </li> <li>Lorem </li> </ol> </body> </html>