: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.

The design in Safari

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:

The Design in IE8: Before fixes

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:

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:

The Design in IE8: After fixes

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.

Comments are closed.