Ordered list (HTML) lower-alpha with right parentheses?

user_129001 0
Viewed 93205

The default lower-alpha list type for ordered list uses a dot '.'. Is there a way to use a right parenthesis instead like a)... b) ..etc?

css html
7 Answers

More than 10 years after the original question the standard (and, to some extent, implementations) seem to have caught up.

CSS now provides ::marker pseudoclass which can be used to achieve custom list markers: MDN.

Using ::marker automatically indents li's content without any hacks. According to MDN, as of Feb 2021 it's supported in Firefox, Chrome and Edge, and partially (not for this use case) in Safari.

.container {
  width: 400px;
}

ol.custom-marker {
  counter-reset: list;
}

ol.custom-marker > li {
  list-style: none;
  counter-increment: list;
}

ol.custom-marker.parens-after.decimal > li::marker {
  content: counter(list) ")\a0";
}

ol.custom-marker.parens-around.lower-roman > li::marker {
  content: "(" counter(list, lower-roman) ")\a0";
}
<div class='container'>
  <ol class='custom-marker parens-after decimal'>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
    <li>Another list here
      <ol class='custom-marker parens-around lower-roman'>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
      </ol>
    </li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Quis varius quam quisque id diam.</li>
  </ol>
</div>

\a0 in content is &nbsp;, since ::marker doesn't support margins or padding.

user_17815300

This seems to work:

ol {
  counter-reset: list;
  margin: 0;
}

ol > li {
  list-style: none;
  position: relative;
}

ol > li:before {
  counter-increment: list;
  content: counter(list, lower-alpha) ") ";
  position: absolute;
  left: -1.4em;
}
user_33656670

In Firefox and newer versions of Chrome/Edge/Chromium, you can define your own counter style with @counter-style and use the prefix and suffix properties to define what comes before/after the counter. According to MDN, this still isn't supported in Safari (as of Oct 2021).

@counter-style my-new-list-style {
  system: extends lower-alpha;
  suffix: ') ';
}

.container ol {
  list-style: my-new-list-style;
}
<div class="container">
  <ol>
    <li>One.</li>
    <li>Two!</li>
    <li>Three?</li>
    <li>Four...</li>
  </ol>
</div>

user_172150200
Related