html - How to style OL number points in CSS -
this question has answer here:
- how can customize numbers in ordered list? 16 answers
i'm trying pretty order list items , i'm wondering how can achieve following effect, , if it's possible in pure css:
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
Post a Comment