when I create a list of links and give those links an a:hover state, I want the entire link, including the bullet point, to highlight on hover. But what because my list has a defined width which is wider than the As, the LIs pick up the :hover and change color before the As do. This looks messy! Like this:
See what I mean? It's like the A & the LI are separate entities, triggering at different times.
If I try adding a display:block to the A styling, all I get is weird display issues in Firefox & a slight improvement in other browsers, but it certainly doesn't solve the problem.
I can change the list-style-type to none and put a :before bullet entity on my LIs, like so:
And that seems to work fine, in Safari & Firefox at least, but as a solution it seems kind of rough/messy/unlikely to be supported in all browsers.
Anyone know a 'bullet-proof' (hah!) way to get this to work, or should I just go ahead and implement in the manner of the 2nd JSfiddle- list-style-none, bullet :before? Thanks!