Excluding unordered list items count from an ordered list

Question

I'm trying to style the numbers next to my unordered list within my ordered list.

For some reason, however, Item A1, Item A2 & Item B1 seem to be including themselves with the counter.

What needs to be done so that ONLY the title for List A and B have that counter?

.ordered {
  list-style-type: none;
  margin: 0;
  margin-left: 3em;
  padding: 0;
  counter-reset: li-counter;
}
.ordered li {
  position: relative;
  margin-bottom: 20px;
  padding-left: 0.5em;
  min-height: 3em;
  color: #fff;
  font-size: 1.5em;
  line-height: 1.5;
  border-left: 2px solid #fff;
}
.ordered li::before {
  position: absolute;
  top: 0;
  left: -01em;
  width: 0.8em;
  font-size: 2.5em;
  line-height: 1;
  font-weight: bold;
  text-align: right;
  color: #fff;
  content: counter(li-counter);
  counter-increment: li-counter;
}
/*unordered list*/
.unordered ul {
  list-style-type: disc;
}
.unordered li {
  font-size: 1.5em;
  line-height: 1.5;
  margin-left: 15px;
  margin-right: 10px;
  margin-bottom: 30px;
  color: #fff;
}
* { background-color: black; }

<ol class="ordered">
  <li>List A
    <br>
    <ul class="unordered">
      <li>Item A1</li>
      <li>Item A2</li>
    </ul>
  </li>
  <li>List B
    <br>
    <ul class="unordered">
      <li>Item B1</li>
    </ul>
  </li>
</ol>

Answer 1

Instead of this:

.ordered li::before { ... }

Do this:

.ordered > li::before { ... }

In your code, you're targeting all li elements with a descendant combinator (the space between selectors). Per its name, it targets all descendants.

Instead, use a child combinator (>), which targets only the children.