How to properly apply CSS style to H elements in ordered list

I have this small problem, I am building a nested ordered list, and I want to be able to customize the styles of top level elements (note that bold is both on the counter and text).

1. AAA

1.1 Lorem ipsum

1.2 Lorem ipsum

1.3 Lorem ipsum

2. BBB

2.1 Lorem ipsum

2.2 Lorem ipsum

2.3 Lorem ipsum

The problem I have encountered is that if I apply any <h> tag for the top level elements of the list, the counter breaks.

Without the <h3> tags counters work properly, but without <h3> I am unable to style top level elements of the list.

How can I get both working counter and styled top level elements?

Sample here:

#test li {
  font-size: 16px;
  padding: 2px 0;
  display: block;
  margin-left: 10px
}

#test h3 {
  display: inline-block;
  padding: 0 0 5px 0;
}

#test ol, ul {
  list-style-type: decimal;
}

#test li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

#test ol {
  counter-reset: item;
  margin: 0
}

#test h3>li {
  font-size: 26px;
}

    <div id="test">
    
    <ol>
       
    <h3><li>AAAA</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>
    
        
    <h3><li>BBBB</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>
    
    <h3><li>CCCC</h3>
    <ol>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    <li><a href=”#”>Lorem ipsum.</a></li>
    </ol>
    </li>
    
    </ol>
    </div>

Solution

As already indicated in the other two answers, the structure is wrong (invalid) as you have put a h3 directly inside a ol and then added the li inside the h3. ol can have only li as direct children, so move the h3 to be within the li and do the following changes to your CSS.

Increment the counters at #test li instead of incrementing it as #test li:before. The reason for this is to have the counter's inheritance and scoping unaffected by the extra elements.
Add the counter's value to the #test li h3:before element (this will add the number next to the heading and apply the same styling as the h3 to the number also). Then we also need to display numbers at second level li, so add the counter display to #test li li:before also.

#test li {
  font-size: 16px;
  padding: 2px 0;
  display: block;
  margin-left: 10px
}
#test h3 {
  display: inline-block;
  padding: 0 0 5px 0;
}
#test ol, ul {
  list-style-type: decimal;
}
#test li {
  counter-increment: item
}
#test li h3:before,
#test li li:before {
  content: counters(item, ".")" ";
}
#test ol {
  counter-reset: item;
  margin: 0
}
#test li > h3 {
  font-size: 26px;
}

<div id="test">
  <ol>
    <li>
      <h3>AAAA</h3>
      <ol>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
      </ol>
    </li>
    <li>
      <h3>BBBB</h3>
      <ol>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
      </ol>
    </li>
    <li>
      <h3>CCCC</h3>
      <ol>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
        <li><a href=”#”>Lorem ipsum.</a>
        </li>
      </ol>
    </li>
  </ol>
</div>

(Added as separate answer because the existing answers did not cover your question fully)