Insert CSS parent section counter for nested lists - html

Question

I have a 2 level ul. I am using counter-reset, counter-increment, and content to insert a running counter. It works in that the content in the lis is numbering correctly.
I have and a link in the first level li, after its nested ul that I want to say "Add To Rule [number of parent li]".
Below is a minimum working example of what I am doing. In the a link, it is using the counter for the 2nd level ul/li.
What it outputs:
Rule 1
Rule 1.1...
Rule 1.2...
Rule 1.3...
Add To Rule 1.3
Rule 2
Rule 2.1...
Rule 2.2...
Rule 2.3...
Add To Rule 2.3
Rule 3
Rule 3.1...
Rule 3.2...
Rule 3.3...
Add To Rule 3.3
What I am trying achieve:
Rule 1
Rule 1.1...
Rule 1.2...
Rule 1.3...
Add To Rule 1
Rule 2
Rule 2.1...
Rule 2.2...
Rule 2.3...
Add To Rule 2
Rule 3
Rule 3.1...
Rule 3.2...
Rule 3.3...
Add To Rule 3
I can't figure out what I need to do to get my expected/wanted output.
ul
{
counter-reset: section;
}
li
{
counter-increment: section;
}
.ruleNumber::after
{
content: counters(section, ".");
}
a::after
{
content: counters(section, ".");
}
<ul>
<li>
<span class="ruleNumber">Rule </span>
<ul>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
</ul>
Add To Rule
</li>
<li>
<span class="ruleNumber">Rule </span>
<ul>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
</ul>
Add To Rule
</li>
<li>
<span class="ruleNumber">Rule </span>
<ul>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
</ul>
Add To Rule
</li>
</ul>

Answer 1

You might use two separate counters -- one for sections and one for items:
ul {
counter-reset: section;
}
ul ul {
counter-reset: item;
counter-increment: section;
}
li {
counter-increment: item;
}
.ruleNumber::after {
content: counters(item, ".");
}
a::after {
content: counters(section, ".");
}
<ul>
<li>
<span class="ruleNumber">Rule </span>
<ul>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
</ul>
Add To Rule
</li>
<li>
<span class="ruleNumber">Rule </span>
<ul>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
</ul>
Add To Rule
</li>
<li>
<span class="ruleNumber">Rule </span>
<ul>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
</ul>
Add To Rule
</li>
</ul>