html - 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;
}

As suggested by @FK32 - we can use the :before pseudo-class to simulate a bullet point, by using the unicode character \2022\. We then initially set it's opacity to 0 and when the user hovers on the list item we change the opacity to 1, by apply a transition:opacity 1s so that we fade it in and out.

I removed any margin or padding that a user agent / custom stylesheet may have applied, and then adding padding to the pseudo so that you can more accurately space your list item's content from your bullet.