Various guides and experiments

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.

Posted in Guides | 1 Comment

One response to “Lists with section signs (§) using CSS counters and content”

  1. mr.x says:

    thank you per the article..

Leave a Reply

Your email address will not be published. Required fields are marked *