CSS3 list transition: position of bullets

Question

I have created a menu with li elements. When li:hover, i would like to approximate list-style bullets to the text, and there would be a color changing too.
(Both of them with transition, so background-image is unfit!) I have already tried so many different ways, with relative positioning, and different margin settings, but none of them works properly. Is there any solution?
(BTW, sorry for my poor english!)

Have you tried a combination of `:hover` and `:before` pseudo-classes? — FK82, Aug 18 '13 at 12:51
Yes, I have tried it, but it was wrong. At least I can't find the right way. — revotyx, Aug 18 '13 at 12:58
Hello revotyx and welcome to stackoverflow. In order to get help please Post some code and a fiddle. Tell us exactly what doesn't work! — raam86, Aug 18 '13 at 12:59
Wrong how? Please post an example to Pastebin.com or JSFiddle.net. Also, please have a look at this answer on SO http://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter — FK82, Aug 18 '13 at 13:00
So, there is my problem: [JSFiddle](http://jsfiddle.net/ybtKQ/). The final result (after the transition) is CORRECT, but as you can see, the texts are moving too. But they should be static. — revotyx, Aug 18 '13 at 13:30

score 1 · Answer 1 · answered Aug 18 '13 at 13:00

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.

CSS3 list transition: position of bullets

1 Answers1