First: don’t tell me about webkit-reporting. I just get a 502 from there! Ok, what’s the problem? I made an example telling it all:
<html>
<head>
<style>
.ext { display: none; color: cyan; }
body {
max-inline-size: calc(100vi - 12px);
&:not(:has(:target)), &:has(p.dft:target) {
#ext { display: none; }
#dft { display: block; }
}
&:has(p.ext:target) {
#ext { display: block; }
#dft { display: none; }
}
&.ext li { display: none; }
&:has(.ext:target) {
& li.ext { display: revert; }
}
}
header > p > a::before { color: orange; content: "click me >>> "; }
ul { display: flex; }
li { margin: 1ex; list-style-type: none; inline-size: max-content; }
.yes li::before {
font-size: 70%; color: yellow; background-color: blue;
content: "(" counters(total, ":") ")";
}
ul.nGrp {
display: inline flex;
counter-reset: nameIndex;
& li::after {
display: inline-block;
counter-increment: nameIndex;
font-size: 75%; color: red; vertical-align: sub;
content: "(" counter(nameIndex) ")";
}
}
header {
inline-size: 100%;
font-size: 2rem; text-align: center;
}
article {
counter-reset: total;
padding: 1ex; margin: 1em;
&::after {
font-size: 3em; color: purple;
content: "— [" counter(total) "] —";
}
li { counter-increment: total; }
outline: 1ex groove purple;
}
</style>
<title>Strange Safari-Count</title>
</head>
<body lang="de">
<header>
<hgroup><h1>Strange counting without <code>:before</code></h1><p>different from FireFox!</p></hgroup>
<p id="dft" class="dft"><a href="#ext">More?</a></p>
<p id="ext" class="ext"><a href="#dft">Less!</a></p>
<p><code>:before</code> doesn’t inherit parent’s display:none? (same in FireFox)</p>
</header>
<article>
<ul>
<li class="dft"><p>A1</p></li>
<li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li>
<li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li>
<li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul>
</li>
<li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li>
</ul>
<ul>
<li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li>
<li class="dft"><p>B2</p></li>
<li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li>
</ul>
</article>
<article class="yes">
<ul>
<li class="dft"><p>A1</p></li>
<li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li>
<li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li>
<li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul>
</li>
<li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li>
</ul>
<ul>
<li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li>
<li class="dft"><p>B2</p></li>
<li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li>
</ul>
</article>
</body>
</html>
At least have an eye on the total count at the end of the (identical) articles! Before and after clicking the teaser.