How to Create Ordered Lists with Lower-Alpha Numbering and Right Parentheses in HTML?

Custom List Style in HTML: Right Parentheses for Ordered Lists

How can you create an ordered list with lower-alpha numbering but use right parentheses instead of the default dot?

Solution:

Leveraging CSS counters, here's a unique solution:

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

HTML Example:

<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>

With this method, you can customize your lists as desired. Simply adjust the "content" property to set the desired character after the list number.

The above is the detailed content of How to Create Ordered Lists with Lower-Alpha Numbering and Right Parentheses in HTML?. For more information, please follow other related articles on the PHP Chinese website!