带右括号的有序列表（HTML）低字母？

Question

有序列表的默认低字母列表类型使用点“.”。有没有办法使用右括号代替 a)... b) ..etc？

Answer 1

这是一个巧妙的解决方案。 （老实说，我对此感到惊讶。） CSS 有一个名为 counters 的东西，例如，您可以在其中设置每个标题上的自动章节编号。稍作修改即可为您提供以下内容；您需要自己整理填充等。

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

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

适用于所有现代浏览器和 IE9+（可能还有 IE8，但可能有问题）。

更新：我添加了子选择器以防止嵌套列表拾取父样式。 trejder 在 cmets 中也有一个好处，即列表项对齐也搞砸了。 article on 456bereastreet 有一个很好的解决方案，它涉及绝对定位计数器。

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

<span>custom list style type (v2):</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>

Here is a jsFiddle 显示结果，包括嵌套列表。

Answer 2

在最初的问题出现 10 多年后，标准（以及在某种程度上，实现）似乎已经赶上了。

CSS 现在提供::marker 伪类，可用于实现自定义列表标记：MDN。

使用::marker 自动缩进li 的内容，没有任何黑客攻击。据 MDN 称，截至 2021 年 2 月，它在 Firefox、Chrome 和 Edge 中得到支持，在 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>

content 中的\a0 是 ，因为::marker 不支持边距或填充。

Answer 3

将它添加到 CSS 中会产生一些有趣的结果。很接近，但没有雪茄。

li:before {
    display: inline-block;
    width: 1em; 
    position: relative;
    left: -0.5em; 
    content: ')'
}

-- 已编辑以在 cmets 中包含 Iazel 的解决方案 -----

我已经完善了您的解决方案：

li {
    position: relative;
}
li:before {
    display: inline-block;
    width: 7px;
    position: absolute;
    left: -12px;
    content: ')';
    background-color: #FFF;
    text-align: center;
}

背景和position: absolute 成功了！

Answer 4

基于 DisgruntledGoat 的回答，我根据需要对其进行了扩展以支持子列表和样式。在这里分享它以防它对某人有帮助。

https://jsfiddle.net/0a8992b9/ 输出：

(i)first roman
    (a)first alpha
    (b)second alpha
    (c)third alpha
    (d)fourth alpha
(ii)second roman
(iii)third roman
    (a)first alpha
    (b)second alpha