Q6

by Schepp

HTML

<h1>My Fancy Legal Document</h1>
<h2>The Foo Directive</h2>
<p>Where permissible by law, the Foo Directive shall be enacted.</p>
<p>This probably doesn't apply anywhere.</p>
<h2>The Bar Manifesto</h2>
<p>
  Normally I'd put a heap of lorem ipsum here,
  but that'd just be boring. I wouldn't want to
  detract from the question like that.
</p>

CSS

h1 {
    counter-reset:headlines;
}

h2::before {
    content:counter(headlines,upper-roman)". ";
    counter-increment:headlines;
    counter-reset:paragraphs;
}

p::before {
    display: inline-block;
    width: 2em;
    content:counter(headlines)"."counter(paragraphs)" ";
    counter-increment:paragraphs;
}

h2:hover::before,
p:hover::before {
    color: red;
}