Html 悬停：在伪元素之前

我有这个导航菜单，我需要在每行前面的圆圈项目符号。HTML代码在这里

如您所见，当我将鼠标悬停在子弹上时，灰色选择是错误的。它跳转到下面的菜单项。而且它不是

注2:我想的一个丑陋的替代方案是将子弹作为背景图像。但这意味着我必须创建大量的图像，因为有不同的颜色，我必须为白色和灰色背景（：hover）创建图像。我宁愿不这样做

注3:我需要像原始代码中那样的大圆号（它是UI设计）。
这是因为您使用了显式的
行高
作为
字体大小
如此之大，如果您删除它，它将起作用。但这不是解决方案，所以解决方案是为您的
：before
pseudo添加

li:before{
   content:'\00b7'; 
   font-size:100px; 
   line-height:24px; 
   vertical-align:middle;
   pointer-events: none;
}


我添加了指向该属性的链接，以便您可以参考有关浏览器支持的信息。

只需将
li:before
替换为
li a:before
，这样您就可以在项目符号上找到指向的链接。对于CSS十六进制值，也可以使用此
'\2022'

li{list-style-type:none;}
li a:before{content:'\2022'; font-size:40px;line-height:0;vertical-align:middle;}

li:hover {
    background:gray;
}

li a {
    cursor:pointer;
}

圆圈不是链接的一部分，因为您在
li
上设置了：before伪元素。将它设置为实际的
a
，它将成为链接的一部分

至于背景颜色跳跃的问题；发生这种情况的原因是您的字体大小不合理，而且行高不匹配。找到一个较大的圆符号或使用CSS创建一个圆

用CSS圆圈代替。
不幸的是，我必须制作大字体，以使子弹周围的字体作为状态指示器，等等……这很有创意。但仍然没有解决可点击的问题。请看这里@HP。显然，它不会单击，因为当您使用
：before
或
：after
pseudo时，它实际上会创建一个与当前元素没有任何关系的虚拟元素，因此如果您希望项目符号可以单击，则需要声明
a:before
而不是
li:before
漂亮的解决方案。我喜欢不使用
内容
li:before{
   content:'\00b7'; 
   font-size:100px; 
   line-height:24px; 
   vertical-align:middle;
   pointer-events: none;
}

li{list-style-type:none;}
li a:before{content:'\2022'; font-size:40px;line-height:0;vertical-align:middle;}

li:hover {
    background:gray;
}

li a {
    cursor:pointer;
}