Почему псевдоэлементы выбираются в Chrome, за исключением последнего, при использовании функции CSS counter()?

КОНТЕКСТ:

Pseudo-elements не должны выбираться, поскольку они являются содержимым с CSS-кодом, которое не вставлено в DOM.

Вопрос:

Возникает вопрос:

Почему Pseudo-elements выбирается в Chrome, за исключением последнего, при использовании функции CSS counter() в свойстве content?

ИЛЛЮСТРАЦИИ:

CODE SNIPPET:

body {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  height: 100vh;
  list-style: none;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  counter-reset: list-items;
}
li {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  counter-increment: list-items;
}
li:first-child {
  background-color: forestgreen;
}
li:nth-child(2) {
  background-color: whitesmoke;
  color: saddlebrown;
}
li:nth-child(3) {
  background-color: firebrick;
}
li:hover {
  background-color: black;
  color: white;
}
li::before {
  font-size: 10vw;
  content: counter(list-items, upper-alpha);
}

<main>
  <nav>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
</main>

Ответ 1

Потому что вокруг нет отрицательного пространства. Если вы добавите некоторое пространство вокруг, вы сможете достичь желаемого эффекта jsfiddle с решением.

В реальной жизни это эквивалент захвата большой коробки с пола одной рукой. Легче вытащить его, если есть немного места для вашей руки между полу и коробкой.

ul {
  margin: 0 10px;
  padding: 0;
  height: 90vh;
  list-style: none;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  counter-reset: list-items;
}