html - How to style OL number points in CSS -


this question has answer here:

i'm trying pretty order list items , i'm wondering how can achieve following effect, , if it's possible in pure css:

enter image description here

is possible change number-points , style them in css, , if so, how?

yes, possible combination of :before pseudo element , css counter-increment.

the html:

<ol>     <li>lorem</li>     <li>lorem</li> </ol> 

and css:

ol {     counter-reset: li; }  li {     position: relative;     list-style-type: none; }  /* style before element how want, important bits here content element , counter-increment */ li:before {     width: 1.75em;     height: 1.75em;     position: absolute; left: 0;             margin-right: 12px;            content: counter(li);     counter-increment: li; } 

Comments

Popular posts from this blog

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -