Why are pseudo-elements selectable in Chrome, except for the last one, when using CSS counter() function?

Question

CONTEXT:

Pseudo-elements are not supposed to be selectable since they are CSS generated content, which is not inserted into the DOM.

---

QUESTION:

The question is:

Why are pseudo-elements selectable in Chrome, except for the last one, when using CSS counter() function in the content property?

---

ILLUSTRATION:

---

CODE SNIPPET:

jsFiddle

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>

---

NOTES:

Reproduced in Chrome Versión 53.0.2785.143 m (64-bit) / Windows 10.

• This does not happen in FF nor Edge.
• Can be solved using the prefixed property -webkit-user-select: none; in pseudo-element.
• Flexbox has nothing to do with the issue, it used in the demo for illustration purposes.

Answer 1

Because there is no negative space around. If you add some space around you can achieve the desired effect jsfiddle with the solution.

In real life it's the equivalent of grabbing a big box from the floor with one hand. It's easier to pull-it off if there is a bit of space for your hand in between the floor and the box.

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;
}