Remove Hover Behaviour from Pseudoelements
Sometimes you want an underline, sometimes you don’t
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’t say I was surprised by this – the arrow was appended to the anchor, of course, courtesy of the class I had applied; so it stands to reason that it also got an underline on hover.
But that’s not what I wanted! A little quick Googling didn’t turn up satisfactory results; so I started flailing about wildly, trying all sorts of combinations of
:after:hover on all sorts of different elements. I even got so desperate as to try a filthy hack involving
z-index, and enough padding to cover up the underline without breaking the layout, which I admit I’m actually kind of disappointed didn’t work.
The secret sauce, as I find it often to be, is
display: inline-block. Add it to your pseudoelement, and you are good to go! Check it: