Lists with section signs (§) using CSS counters and content

When listing rules or statutes you might want to have a section sign in front of each number. I found myself in that situation the other day but found absolutely nothing about it on Google, so here’s me publishing my way to do it just to alleviate the blatant lack of information on the net.

The way I did it was using the :before pseudo class, content property, CSS counters and finally text-indent to make up for lost indentation.

The final code looks something like this:

ol#statutes {
	counter-reset: section; # resets the counter
	margin-left: 23px; # modify this according to your layout
}
ol#statutes > li { # > so as to not affect nested lists
	list-style-type: none; # or we'd have 1. §1.
	text-indent: -23px; # adjust this for your font and size
}
ol#statutes > li:before {
	content: '§' counter(section) '. '; # here's where the magic happens
	counter-increment: section; # increment counter for next time
}
ol#statutes > li li {
	text-indent: 0; # because it's inherited
}

It’s possible to create several counters so you can change the way subsections look and all sorts of nice things.