How do you do tab stops in HTML/CSS

user_338 0
Viewed 11878

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

Image of formatted text

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?

tabstop formatting css html
7 Answers
`#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
}`
user_198373490
Related