When using the flex shorthand, you cannot use % for flex-basis if using calc.

How do I align a custom list-style/bullet point in a list with CSS? You use flexbox!

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.