CSS3列表过渡：项目符号的位置

Question

我创建了一个菜单，其中包含li元素。当li:hover，我想近似列表式的项目符号的文本，并会有一个颜色也改变。
（它们都与transition，所以background-image是不合适的！） 我已经尝试了很多不同的方式，相对定位和不同的边距设置，但都没有正常工作。有没有解决方法？
（顺便说一句，对不起，我英文不好！）

Answer 1

Give this a whirl：

ul { 
    list-style:none; 
    margin:0; 
    padding:0; 
} 
ul li:before { 
    content: "\2022"; 
    opacity:0; 
    padding:0 5px 0 10px; 
    margin:0; 
    transition:opacity 1s; 
} 
ul li:hover:before { 
    opacity:1; 
} 

至于建议由@ FK32 - 我们可以使用:before伪类来模拟子弹点，由使用Unicode字符\2022\。然后，我们最初将它的opacity设置为0，当用户悬停在列表项上时，我们通过应用transition:opacity 1s将不透明度更改为1，以便淡入淡出。

我删除了用户代理/自定义样式表可能已应用的任何边距或填充，然后将填充添加到pseudo，以便您可以更精确地将项目内容从项目符号中间隔开。