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

【问题标题】：CSS3 list transition: position of bulletsCSS3 列表过渡：项目符号的位置
【发布时间】：2013-08-20 09:21:36
【问题描述】：

我创建了一个包含li 元素的菜单。当li:hover 时，我想将列表样式的项目符号近似为文本，并且颜色也会发生变化。
（他们都用transition，所以background-image不合适！）我已经尝试了很多不同的方法，包括相对定位和不同的边距设置，但它们都不能正常工作。有什么解决办法吗？
（顺便说一句，对不起我的英语不好！）

【问题讨论】：

你试过:hover和:before伪类的组合吗？
是的，我试过了，但是错了。至少我找不到正确的方法。
您好 revotyx，欢迎来到 stackoverflow。为了获得帮助，请发布一些代码和小提琴。告诉我们什么是行不通的！
错了怎么办？请将示例发布到 Pastebin.com 或 JSFiddle.net。另外，请在 SO stackoverflow.com/questions/5777210/… 上查看此答案
所以，我的问题是：JSFiddle。最终结果（转换后）是正确的，但如您所见，文本也在移动。但它们应该是静态的。

标签： html list css hover transition

【解决方案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，以便您可以更准确地将列表项的内容与项目符号隔开。

【讨论】：