:after and :before css pseudo elements hack for IE 7

Question

I am using :after and :before css pseudo elements and it is working fine in IE8, and all modern browsers but it is not working fine in IE7. Are there known hacks to work around this in IE7?

Answer 1

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

http://jquery.lukelutman.com/plugins/pseudo/

Answer 2

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

Answer 3

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;
}

Answer 4

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/

Answer 5

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 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;
}

Answer 6

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>');
}

Answer 7

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"
  );
}