:after and :before CSS pseudo elements hack for Internet Explorer 7
HtmlCssInternet Explorer-7Pseudo ElementHtml Problem Overview
I am using :after
and :before
CSS pseudo elements and it is working fine in Internet Explorer 8, and all modern browsers but it is not working fine in Internet Explorer 7. Are there known hacks to work around this in Internet Explorer 7?
Html Solutions
Solution 1 - Html
with any pure CSS hack it's not possible.
Use IE8.js http://code.google.com/p/ie7-js/
It has support for this. http://ie7-js.googlecode.com/svn/test/index.html
test page also there
after - http://ie7-js.googlecode.com/svn/test/after.html
before - http://ie7-js.googlecode.com/svn/test/before.html
Edit after 1st comment
You can just keep this js for IE6 and 7. other browser will not read it.
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
And if you are already using jQuery in your project than you can use this plugin
jQuery Pseudo Plugin
Solution 2 - Html
I was using IE8.js (http://code.google.com/p/ie7-js/) in a project and I had to remove it because it blocked IE7 between 10/15 secs.
To mantain the content generated with :after and :before pseudo-elements, without IE8.js, I did the following:
.tabs {
*zoom: expression(
this.runtimeStyle.zoom="1",
this.appendChild( document.createElement("small") ).className="after"
);
}
.tabs:after,
.tabs .after {
content: '';
display:block;
height:10px;
width:100%;
background:red;
}
I prefer this way rather than with javascript, because this will keep all selectors in the same place :)
Solution 3 - Html
To before and after you can use this:
.tabs {
*zoom: expression(
this.runtimeStyle.zoom="1",
this.insertBefore(
document.createElement("div"),
this.childNodes[0]
).className="before",
this.appendChild(
document.createElement("div")
).className="after"
);
}
...
.tabs::before, .tabs .before {
display: block;
width: 10px;
height: 20px;
background-color: #eee;
float: left;
}
.tabs::after, .tabs .after {
display: block;
width: 10px;
height: 20px;
background-color: #c0c;
float: left;
}
Solution 4 - Html
Well there is a pure CSS hack that works, sort of. It's black magic but is sometimes handy when used scarsely.
It's explained here: http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.php</del> http://web.archive.org/web/20080706132651/http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.php
HTML fragment:
<div id="container">
<!-- -->
<div class="mainContent">
<p>Blah blah</p>
<p>Blah blah</p>
<p>Blah blah</p>
<!-- -->
</div>
</div>
CSS:
#container:before
{
background: url("corners-top.png");
content: "";
display: block;
height: 24px;
}
#container .mainContent:after
{
background: url("corners-bottom.png");
content: "";
display: block;
height: 28px;
}
IE-specific stylesheet:
#container *
{
background: url("corners-top.png");
display: list-item;
font-size: 24px;
line-height: 24px;
list-style: none;
}
#container .mainContent
{
background: none;
display: block;
font-size: 1em;
line-height: 1.25;
}
#container .mainContent *
{
background: url("corners-bottom.png");
font-size: 28px;
line-height: 28px;
}
/*
Now, still in the IE-specific stylesheet, remove the styles for all
element descendants of .mainContent. Refer to each element by tag name.
*/
#container .mainContent p, #container .mainContent div, (And so on...)
{
background: none;
display: block;
font-size: 1em;
line-height: 1.25;
}
Solution 5 - Html
You can use CSS expressions to do this. For example you could plug a ♣ symbol via:
expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♣'+this.innerHTML)
I wrote an article about this on Smashing Magazine, see http://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/
Solution 6 - Html
If you're already using Modernizr, it has a core detect for "CSS Generated Content".
You can then fill in the missing :before
or :after
using JavaScript. For example:
.selector:before, .selector-before {
content: "Hello, world!";
color: red;
}
jQuery to insert generated content directly into the DOM:
if (!Modernizr.generatedcontent) {
$('.selector').prepend('<span class="selector-before">Hello, world!</span>');
}
Solution 7 - Html
When needing support for :before and :after I use the following gist that I wrote. It's pure CSS (to the point were you just write CSS) but does include a CSS expression. Works in most cases.
https://gist.github.com/2362483
/* =============================================================================
CSS Declarations
========================================================================== */
/* ==|== The Standard Way =================================================== */
.foo::before {
/* ...css rules... */
}
.foo::after{
/* ...css rules... */
}
/* ==|== The IE Way =================================================== */
/* NOTE: a comma separated IE & Standard rule won't work. *
* IE doesn't understand ::before or ::after & ignores the declaration */
.lt-ie9 .foo:before,
.lt-ie8 .foo .ie-before {
/* ...css rules... */
}
.lt-ie9 .foo:after,
.lt-ie8 .foo .ie-after {
/* ...css rules... */
}
/* =============================================================================
IE6 & IE7 polyfills
========================================================================== */
.lt-ie8 .foo {
zoom: expression(
this.runtimeStyle.zoom="1",
/* ::before polyfill - creates <i class="ie-before"></i> */
this.insertBefore( document.createElement("i"), this.firstChild ).className="ie-before",
/* ::after polyfill - creates <i class="ie-after"></i> */
this.appendChild( document.createElement("i") ).className="ie-after"
);
}