css target-counter/s() for non Generated Content for Paged Media Module use cases

163 views Asked by At

I've seen a couple pages/YouTube videos on how to use the css target-counter/s CSS function, but all are for the Generated Content for Paged Media Module.

Is there any way to achieve comparable functionality for regular browser orientated pages?

I tried the target-counter function in my normal css style sheets, but I only get 'Invalid property value' when using that function, which is not surprising that it is for the Generated Content for Paged Media Module only(?). I try to do that from within Doxygen files, but that should not differ from plain HTML. Doxygen uses the h1 html tag for \section

.dox

<b>TOC</b>
<a class="toc" href="#Chapter1Section1">Section 1</a>
<a class="toc" href="#Chapter1Section2">Section 2</a>

\section Chapter1Section1 Section 1
....

.css

h1 {counter-reset:subsection;}
h1::before {
   counter-increment:section;
   content:counter(section) " ";
}
h2::before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}
.toc {
    display: block;
}
.toc::before{
    content:"Section " target-counter(attr(href), h1) " ";
}

Is there anything equivalent to the target-counter (or target-text) functionality that I could use for browser based pages?

Thanks, Martin

0

There are 0 answers