Posts

Showing posts from August, 2025

Reflection with CSS

Image
 I realised you can do a reflection along the 'x' axix with a 'transform' of 'scale(-1,1)'. I was going to rotate the element 180 degrees around the 'z' axis.  This might involve more complex 'sine' and 'cosine' functions.

Changing ':before' and ':after' elements to 'div' elements

Image
 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'.