How Can I Create Ordered Lists with Lowercase Alphabetical Numeration and Right Parentheses Using CSS?

Creating Ordered Lists with Lower-Alpha and Right Parentheses

The default ordered list style for lower-alpha numeration utilizes dots. However, is it possible to modify this style and use right parentheses instead?

Customizing Ordered List Styles

Using CSS counters, we can establish custom list styles. Here's how we can achieve the desired result:

ol {
  counter-reset: list;
}

ol > li {
  list-style: none;
}

ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

To demonstrate this solution:

<span>Custom List Style Type (v1):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

This custom style will now render ordered list items with lower-alpha numeration followed by a right parenthesis:

a) Number 1
b) Number 2
c) Number 3
d) Number 4
e) Number 5
f) Number 6

Note that you may need to adjust padding or other styling aspects to suit your specific needs.

The above is the detailed content of How Can I Create Ordered Lists with Lowercase Alphabetical Numeration and Right Parentheses Using CSS?. For more information, please follow other related articles on the PHP Chinese website!