I'd like to have section headers (h1, h2, h3..) numbered in such a way that beginning of the text is a uniform distance from the edge of the column (much as a list does with the markers or one might use tabs in a word processor). I would like:

...
8   Introduction
9   Related Work
10  Other things
11  More things

And not:

...
8  Introduction
9  Related Work
10  Other things
11  More things

The difference is that the spacing for the counter is the same for all section headings in the entire document. I know how to add a fixed amount of space between the number and the text, but that isn't what I want. As said above, I'd like to to act more like a tab would in a word processor.

I'm doing the counter using the :before attribute. I tried adding "width: 4em" (or whatever), but it didn't seem to work:

h1:before {
  content: counter(h1) " ";
  width: 4em;
}

I also tried using the "marker" format, but it didn't seem to work either:

h1:before {
  content: counter(h1) " ";
  display: marker;
  marker-offset: 5em;
}

Any ideas?

The easiest way might be to change the headings to list items by applying "display: list-item" so that they get a marker that you can style with the ::marker pseudo-element.

Alternatively, use ::before, but float it to the left and use a negative left margin to pull it right out of the normal flow. Then the counters should all line up without disturbing the heading text at all.

By the way, "display: marker" was introduced in CSS 2, but has has been deprecated in CSS 2.1 due to problems in its specification, and to my knowledge it has never been implemented.

I took the "list-item" approach, and got it to work. Thanks. For the record, below is what I ended up with.

h1 {
  counter-increment: h1;
  counter-reset: h2;
  display: list-item;
  margin-left: 1.5em;
}

h1::marker {
  content: counter(h1, decimal);
  width: 1.5em;
}

h2 { 
  counter-increment: h2;
  counter-reset: h3;
  display: list-item;
  margin-left: 2em;
}

h2::marker {
  content: counter(h1, decimal) "." counter(h2, decimal) "  ";
  width: 2em;
}

...

It bothers me that the "margin-left" in the h1 and the "width" in the h1::marker must be kept in sync. But I'm not sure how to get rid of that redundancy.