One issue I'm having is with creating a list of links and styling them with a:hover. The problem arises when the list has a defined width wider than the links themselves, causing the LIs to change color before the As on hover. It creates a messy appearance.
Take a look here for an example
It seems like the A & the LI act as separate elements, triggering at different times.
Adding display:block to the A styling results in strange display issues in Firefox and only a slight improvement in other browsers, not solving the problem completely.
I experimented with changing the list-style-type to none and using :before bullet entity on the LIs instead:
Here is another approach that worked better in Safari and Firefox
However, this solution may not be supported in all browsers and feels somewhat rough/messy. Does anyone know a more reliable method to achieve this effect, or should I stick with the second JSfiddle approach of list-style-none and bullet :before? Thanks!