如何在 HTML/CSS 中进行制表符停止

我想用 HTML 呈现一些文本的格式。这是一张图片：

请注意带有项目符号点和段落编号的灰线。项目符号应位于页面中央，并且数字应正确对齐。

我一直在尝试思考如何在 HTML 中做到这一点，但一无所获。您将如何捕获这种格式？

您可以使用:before and :after伪元素在这里发挥了巨大的作用：

http://jsfiddle.net/yNnv4/1/ http://jsfiddle.net/yNnv4/1/

这适用于所有现代浏览器和 IE8+。如果需要 IE7 支持，这个答案不适合你:)

#container {
    counter-reset: nums;
}
p {
    position: relative;
    margin: 21px 0;
}
p:before {
    content: '\2022 \2022';
    font-size: 2em;
    position: absolute;
    top: -8px;
    left: 0;
    line-height: 1px;
    color: #888;
    width: 100%;
    text-align: center
}
p:after {
    content: counter(nums);
    counter-increment: nums;
    font-size: 1.5em;
    position: absolute;
    top: -8px;
    right: 0;
    line-height: 1px;
    color: #888;
    font-family: sans-serif
}

有关counter特性：

• https://developer.mozilla.org/en/CSS_Counters https://developer.mozilla.org/en/CSS_Counters
• http://www.w3.org/TR/CSS21/syndata.html#counter http://www.w3.org/TR/CSS21/syndata.html#counter
• http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

不可能（自动）增加项目符号。

然而，可以通过一些可疑的重复来完成：

http://jsfiddle.net/N4txk/1/ http://jsfiddle.net/N4txk/1/

p:before { content: '\2022' }
p+p:before { content: '\2022 \2022' }
p+p+p:before { content: '\2022 \2022 \2022' }
/* .... */

（或者，:nth-child可以用同样的方式重复：http://jsfiddle.net/N4txk/ http://jsfiddle.net/N4txk/- 但它在 IE8 中不起作用；只有两颗子弹）

子弹数量有上限sensible所以我认为根据需要多次复制和粘贴是可以接受的。