Sometimes it’s necessary to have a link that contains some children elements. Say, for example, you have a link that contains some text and an inline SVG icon that’s styled using CSS. This set up allows you to style the icon for all of the link states :hover, :visited, and :active right? Well yes, with the exception of the :active state in Internet Explorer. Well, not without a work around at least.

How it Should Work

Say I want apply a transform: scale(0.7); to an inline svg when the link is active.

The HTML

The CSS

The Result

The Problem: This Doesn’t Work in IE

If you try the example above in Internet Explorer the transform will not be applied, even in ie11. Well, actually it will be applied if you click on the link anywhere that is not the inline SVG. If you click the text for example you will see the transition occur.

The Fix

To fix this I can simply place a pseudo element :before or :after on the link above all of its contents. This will effectively set the clickable area of the link on a layer above its contents meaning that the click will occur on the link and not the SVG.

First, Set the Stacking Context

Then, Style the Pseudo Element

The Result

Comments