How do you do tab stops in HTML/CSS

Question

There is some text whose formatting I would like to render in HTML. Here is an image:

Note the gray lines with the bullet points and the paragraph numbers. The bullets should be centered on the page and the numbers should be justified right.

I've been trying to think of how to do this in HTML and am coming up blank. How would you capture this formatting?

Answer 1

You can use the :before and :after psuedo-elements to great effect here:

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

This will work in all modern browsers and IE8+. If IE7 support is required, this answer is not for you :)

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

About the counter properties:

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

---

It's not possible to (automatically) increment the bullets.

However, it can be done with some dubious repetition:

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

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

(alternatively, :nth-child can be repeated in the same way: http://jsfiddle.net/N4txk/ - but it won't work in IE8; there will only be two bullets)

There is an upper limit on the number of bullets it would be sensible to have, so I think it would be acceptable to copy and paste that as many times as required.