Home / Css / Html Lists

Custom List Style For Ordered Lists

October 12, 2022 Post a Comment

Is it possible to define a style for an ordered list that renders something like

Item 1
Item 2
Item 3
Solution 1:
You can use css counter and :before pseudo-element to create this type of list.
Baca Juga
```
ol {
  counter-reset: custom;
  list-style-type: none;
}

ol li:before {
  content: '('counter(custom)') ';
  counter-increment: custom;
}
```
```
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ol>
```

Post a Comment for "Custom List Style For Ordered Lists"