背景：
伪元素不应该是可选择的,因为它们是未生成DOM的CSS生成的内容.
题：
问题是：
为什么在内容属性中使用CSS counter()函数时,Chrome中可以选择伪元素(最后一个除外)？
插图：
代码：
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>
笔记：
转载于ChromeVersión53.0.2785.143 m(64位)/ Windows 10.
>这不会发生在FF和Edge.
>可以使用前缀属性来解决-webkit-user-select：none;在伪元素.
> FlexBox与该问题无关,在演示中用于说明的目的.
解决方法
因为周围没有负空间.如果你添加一些空间可以达到想要的效果
jsfiddle with the solution.
在现实生活中,相当于用一只手从地板上抓住一个大盒子.如果你的手在地板和箱子之间有一点空间,它更容易拉开.
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;
}
