:before and :after Pseudo-elements: IE8 Supports Them (But Font Sizing with Percentages Can Be Wonky)
The Darowski.com redesign launched in February relies heavily on pseudo-elments. That’s how you see all that “exposed markup” in the design without it showing up in the code.
Here’s how it looks.
So, to recap the markup of the h1 is:
<h1>Adam Darowski</h1>
And the CSS is:
h1 { font-size: 450%; line-height: 1.2; font-weight: normal; font-style: italic; margin: 0 20px 20px 40px; text-indent: -55px; }
h1:before { content: '<h1>'; font-size: 50%; }
h1:after { content: '</h1>'; font-size: 50%; }
The good news is Internet Explorer 8 is the first version of IE that will actually will show the content contained in the pseudo-elements.
The Problem
The bad news is it looks like this:
Wait, why is it so tiny? The problem seems to lie in the h1:before, h1:after { font-size: 50%; }. If you remember, I took my h1 and boosted the size to 450%. Then, for the “exposed markup”, I dropped the font-size to 50% of that. Looks like the difference is:
- Firefox, Safari, and Opera treat the content generated by the :before and :after pseudo-elements as part of the
h1. Because of this, thefont-size: 50%is adjusts thefont-size: 450%, making the “exposed markup” render at 225%. - Internet Explorer 8 treats then content generated by the :before and :after as outside of the
h1. In this case, thefont-size: 50%is instead applied to the base text size (which in my case isfont-size: large). This is why it looks so tiny. - Internet Explorer versions 7 and older are still reading HTML for Dummies and haven’t caught up.
The Solution
Once I figured out what was happening, the fix was super easy. I created an IE8 style sheet an used a conditional comment to add it to my page. You target IE8 the same way you did older versions:
<!--[if IE 8]>
<link href="style-ie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
Then in that style sheet, I simply added a pixel-based font-size for the pseudo-elements.
h1:before, h1:after { font-size: 30px; }
Why pixel-based? Simply because IE8 won’t screw it up. It’s not ideal, but neither is Internet Explorer. Here’s how it looks:
So, if you ever generate content with :before and :after and resize it with percentages (I mean, who doesn’t do that every day?), that’s your solution.