html - 我们如何使用伪元素实现类似列表的行为

Question

因为我们在 html 中支持的列表装饰器类型很少。如圆圈、十进制圆盘等。 如果我们想要自定义列表装饰器，那么我们必须使用伪元素。 例如

 (a). Hi list item
 (b). hi there 

伪元素的问题是，当你的伪元素的计数器值达到下一个数字时，内容就没有正确对齐。 前任。对于数字计数器，最多 9 个内容对齐，但当 10 出现时，列表项内容向右移动。同样对于 100、1000 ...

为了解决这个问题，我使用了带有文本对齐的显示内联 block 。

  width: 30px;
  text-align: right;
  margin-right: 10px;
  display: inline-block; 

另一个问题是，当列表项内容溢出到下一行时，下一行从伪元素计数器开始的相同位置开始。

为了解决这个问题，我必须在 em 中使用文本缩进。但这也不是万无一失的解决方案。当计数器值和列表项文本都增加时，就会观察到轻微的错位。

我有几个问题。

• 1. 要正确对齐伪元素，display-inline block 是唯一的选择吗？
• 1. 我们如何使用伪选择器实现类似列表的行为。
• 1. 我们可以使用哪些其他可能的 css 样式来对齐列表等内容。

如果我需要放置一些代码片段或未对齐的图像快照，请告诉我。

Answer 1

好的，我有这个解决方案，使用 table。所以你不需要使用边距或填充。也可以将 li 样式化为 ( x ) . 在 li:before content

中使用它

ul {
    counter-reset: list;
    width:20%;
    display: table;
}
ul > li {
    list-style: none;
     display: table-row;
}
ul > li:before {
    content: "( "counter(list, lower-alpha) " ). ";
    counter-increment: list;
    display: table-cell; 
    text-align: right;
    width:100%;
}

<ul>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
</ul>