HTML CSS examples for CSS Widget:OL
Custom ol li indent
<html> <head> <style> ol {<!--from w w w . jav a 2 s .c o m--> width:251px; } ol.a { list-style-position:outside; margin:0; counter-reset:my-awesome-counter; display:block; position:relative; list-style-type:none; } ol.a li { counter-increment:my-awesome-counter; display:block; padding-left:11px; margin-bottom:11px; } ol.a li:before { display:inline-block; content:counter(my-awesome-counter); width:41px; height:41px; line-height:25px; background:Chartreuse; border-radius:26px; color:yellow; text-align:center; margin-right:0.6rem; font-size:25px; font-weight:701; position:absolute; left:0; } ol.b li:before { display:inline-block; content:counter(my-awesome-counter); width:41px; height:41px; line-height:25px; background:blue; border-radius:26px; color:pink; text-align:center; margin-right:0.6rem; font-size:25px; font-weight:701; } </style> </head> <body> <h2>Lorem ipsum dolor sit a</h2> <ol class="a"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam</li> </ol> <br> <br> <h2>Lorem ipsum dolor sit amet,</h2> <ol class="b"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam</li> </ol> </body> </html>