Changing ':before' and ':after' elements to 'div' elements
I sometimes change ':before' and ':after' pseudo elements to 'div' elements so I can reference them by 'id' in JavaScript.
For example, I am adapting a CSS icon for 'Github' that uses ':before' and ':after'.
I usually add an inner 'div' container element which has a 'position' of 'relative' and a 'width' and 'height' of '100%'. I put the ':before' and ':after' elements inside this container with a position of 'absolute'.
But if the 'Github' icon is very small then the ':before' and ':after' elements are too far down. So instead, I set a parent element of the ':before' and ':after' elments to have a 'position' of relative'. The icon uses 'em' sizes and I reduce the size by setting the 'font-size'.
Comments
Post a Comment