Differentiating a Hovered Link's ::after Pseudo Element
Here's a small piece of CSS - simple, but posting here for posterity - to add a different style to a hovered/focussed link's ::after pseudo element.
I needed to create a link with an arrow after it, something like this a link >>. But, by default when you hover a link, whatever styling is applied to it will also apply to the after item, so if there was a hover state, it might look like this: a link >>. I didn't want the arrows underlined, I wanted something like this: a link >>, so added this CSS.
1) Set up the basic style for our "styled" anchor/link. This also sets a transition of .3 of a second, so when it goes to bold on hover, there is a smooth transition.
2) Add the arrows after the link.
3) Set the hover state for the link
4) Set the hover state for the ::after pseudo element, including setting the margin-left to 8px so the arrows move to the right slightly when the link is hovered.