Creating Legal List Numbering only using CSS
If you want to create lists with legal style numbering, here's a way to do it. It's quick, clean, and tidy. It results in lists that automatically do this sort of thing:
1. Section
1.1 Clause
1.1.1 Sub-Clause
1.1.1.1 Sub-Sub-Clause
And here's some sample HTML Code:
<html>
<header>
<title>Sample of Legal List using CSS</title>
<link type="text/css" rel="stylesheet" href="http://lane.net.nz/./legal-lists.css" />
</header>
<body id="legal-list" >
<h1>Sample of Legal List Numbering using CSS</h1>
<h2>Section One</h2>
<ol>
<li>Clause One</li>
<li>Clause Two
<ol>
<li>Clause Two sub One</li>
<li>Clause Two sub Two</li>
<li>Clause Two sub Three</li>
</ol>
</li>
<li>Clause Three</li>
</ol>
<h2>Section Two</h2>
<ol>
<li>Clause One</li>
<li>Clause Two</li>
<li>Clause Three
<ol>
<li>Clause Three sub One
<ol>
<li>Clause Three sub One sub One </li>
<li>Clause Three sub One sub Two</li>
<li>Clause Three sub One sub Three</li>
</ol>
</li>
<li>Clause Three sub Two</li>
<li>Clause Three sub Three</li>
</ol>
</li>
</ol>
</body>
</html>
The CSS looks like this:
And here's what it should look like:/* legal list styles */
#legal-list {
counter-reset: section;
}
#legal-list h2:before {
counter-increment: section;
content: counter(section) ". ";
margin: 0 0.5em 0 0;
}
#legal-list ol {
counter-reset: clause;
list-style: none outside none;
text-indent: -2em;
}
#legal-list ol li {
counter-increment: clause;
}
#legal-list ol li:before {
content: counter(section) "." counters(clause, ".") ". ";
margin: 0 0.5em 0 0.5em;
}
Section One
- Clause One
- Clause Two
- Clause Two sub One
- Clause Two sub Two
- Clause Two sub Three
- Clause Three
Section Two
- Clause One
- Clause Two
- Clause Three
- Clause Three sub One
- Clause Three sub One sub One
- Clause Three sub One sub Two
- Clause Three sub One sub Three
- Clause Three sub Two
- Clause Three sub Three
To try this, just download the attached files (or copy and paste the blocks above into your own files with the same names) and open the legal-list-sample.html file in your browser.
- dave's blog
- Login to post comments
