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，以便您可以更精確地將項目內容從項目符號中間隔開。