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，当用户将鼠标悬停在列表项上时，我们将不透明度更改为1，方法是应用transition:opacity 1s，以便我们将其淡入淡出。

我删除了用户代理/自定义样式表可能已应用的任何边距或填充，然后向pseudo添加填充，以便您可以更准确地从子弹中分隔列表项的内容。