I'm currently attempting to implement a CSS transformation on an icon (glyph) within a :before pseudo element.
My primary objective is to execute a simple "flip" animation on the icon using transform: scale(-1, 1), but I am encountering difficulties in applying any type of transformation to a glyph nested within a :before pseudo-element.
Here is a straightforward example:
<!DOCTYPE html>
<html>
<style>
.icon
{ }
.icon::before {
content: "X";
color: white;
font-size: 11pt;
transform: scale(5);
}
</style>
<body>
<div style = "padding: 1em; background: black; width: 200px; height: 200px">
<div class = "icon">
</div>
</div>
</body>
</html>
Access the fiddle here: http://jsfiddle.net/729yspsp/1/
In this instance, I am employing a basic X character in place of the actual glyph for illustrative purposes.
It is evident that no transformation has been successfully applied to the glyph.
What could possibly be the mistake in my approach?
Note: This issue is not attributed to browser compatibility as I am utilizing a current version of Chrome (Chrome 37).