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

Posted 2023-05-08

【中文标题】CSS3 列表过渡：项目符号的位置

【英文标题】：CSS3 list transition: position of bullets

【发布时间】：2013-08-20 09:21:36

【问题描述】：

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

【问题讨论】：

你试过:hover和:before伪类的组合吗？

是的，我试过了，但是错了。至少我找不到正确的方法。

您好 revotyx，欢迎来到 ***。为了获得帮助，请发布一些代码和小提琴。告诉我们什么是行不通的！

错了怎么办？请将示例发布到 Pastebin.com 或 JSFiddle.net。另外，请在 SO ***.com/questions/5777210/…

上查看此答案

所以，我的问题是：JSFiddle。最终结果（转换后）是正确的，但如您所见，文本也在移动。但它们应该是静态的。

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