We all love the cool stuff we can do with pseudoelements in CSS... almost as much as we love being able to specify hover behaviour without having to mess about with JavaScript. When we try to use the two together, though, sometimes we can run into problems.
One frequently-used way is to use :after
to append an arrow after some link text. Unfortunately, if we also have some sort of hover behaviour applied to that link, it will also apply to the pseudoelement as well. Most of the time, it's not a huge deal; but sometimes, it just looks wonky.
I had a fairly standard menu of list items with background-color
applied to each item and :hover
applied to the anchor tags. The last item was a sign-out link, to which I wanted to append an arrow for more call-to-action goodness. Since I wanted only that last link to have the pseudoelement applied, I had to assign a class to only that link and then apply the pseudoelement. That worked nicely... until I hovered over the link. The stupid arrow was underlined! I can'