0

I'm trying to used HTML to prepare a legal document and need to be able to number headings and then cross-references those numbers throughout the document. I have successfully sorted out the numbering as in the example below but how can I correctly create the 'h2ref' and 'h3ref' classes to cross-reference in the 'a' tag near the bottom. The output in this last line should be:

"this is some content referencing Section 1."

Here's my code

body {
  counter-reset: h2counter;
}

h1 {
  counter-reset: h2counter;
}

.countheads~h2:before {
  content: counter(h2counter) ".\0000a0\0000a0";
  counter-increment: h2counter;
}

h2 {
  counter-reset: h3counter;
}

.countheads~h3:before {
  content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
  counter-increment: h3counter;
}

ol {
  #list-style-type: lower-alpha;
  list-style-type: lower-roman;
}

a.h2ref:after {
  content: "Section " attr(href);
}

a.h3ref:after {
  content: "Subsection " attr(href);
}
<h1 class="countheads">Numbering headings</h1>

<h2 id="About">About</h2>

<p>Some text</p>

<ol>
  <li id="item1">Some more text</li>
  <li>this is another line</li>
</ol>

<h3>Subheading</h3>

<p>More text</p>

<h3>One more subheading</h3>

<h2 id="Demonstrations">Demonstration</h2>

<p>this is some content referencing
  <a class="h2ref" href="#About"></a>.</p>

The code above is based on another question in Stackoverflow but have unfortunately lost track of the source. If you can point me in the right direction will be very happy to credit appropriately.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
ptav
  • 171
  • 1
  • 11
  • Does this answer your question: https://stackoverflow.com/questions/65663414/include-css-counters-in-anchor-links ? – F. Müller Oct 29 '22 at 12:15
  • As far as I know you cannot do that with just plain css only and the link I've posted above does also confirm this. – F. Müller Oct 29 '22 at 12:17

0 Answers0