Menu
I'm trying to style the numbers in a ordered list, I'd like to add background-color, border-radius and color so they match the design I'm working from:
I guess it's not possible and I'll have to use different images for each number i.e.
ol li:first-child {list-style-image:url('1.gif')}; ol li:nth-child(2) {list-style-image:url('2.gif');} etc... Is there a simpler solution?
915
Answer: Type attribute allows us to change the style of numbers in an ordered list. Explanation: The < li > tag includes two attributes – type and value. The type attribute is used to modify the order numbering in the list item.
There is the Type attribute which allows you to change the numbering style, however, you cannot change the full stop after the number/letter. The markup in this answer needs to be fixed. Use lowercase and enclose attribute values in "quotes".
There can be different types of numbered list: Numeric Number (1, 2, 3) Capital Roman Number (I II III) Small Romal Number (i ii iii)
An ordered list uses numbers or some sort of notation that indicates a series of items. For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on.
You can do this using CSS counters, in conjunction with the :before pseudo element:
ol { list-style: none; counter-reset: item; } li { counter-increment: item; margin-bottom: 5px; } li:before { margin-right: 10px; content: counter(item); background: lightblue; border-radius: 100%; color: white; width: 1.2em; text-align: center; display: inline-block; }<ol> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
