jQuery Pseudo Plugin

A jQuery plugin for :before and :after in Internet Explorer.

  1. Pseudo-who?

    CSS2's :before and :after pseudo-selectors are really handy ... but they don't work in Internet Explorer. Nope, not even IE7. I bet you're thinking: "But what if we used as many proprietary Microsoft features as possible all at the same time, that'll show 'em!" And you know what? You're absolutely right. You've just gotta love that this —  * { behavior: expression(...); } — can (more or less) enable :before and :after for IE5.5+

    With jquery.pseudo.js in the <head/> of your document, you can then do:

    	
p:before, p {
    before: 'foo';
    content: 'foo'; }
	
p:before, p .before {
    color: blue; }

    Images are also supported:

    	
p:before, p {
    before: url(foo.png);
    content: url(foo.png); }

    If you're a standardista (and you should be), you can feed Internet Explorer a separate stylesheet with all the proprietary bits, using a conditional comment:

    main.css:	
p:before {
    content: 'foo'; }
	
p:before, p .before {
    color: blue; }

ie.css:
p {
    before: 'foo'; }

  2. Examples

  3. Known Issues

    Javascript Dependant
    Only works when JavaScript is enabled (read: follow best-practice and make sure your page is usable without JavaScript).
    Selector Specificity
    The plugin fakes :before and :after by inserting a span with the appropriate class. However, p:before is much more specific than p .before, and the latter can cascade unintentionally in IE if nested elements also have before and after applied. What we'd really like to use is p > .before:first-child, but of course, IE5-IE6 don't support those selectors. Avoid nesting, or use p * .before {} fix, and let the specificity war begin :-(
    Not Dynamically Updated
    Content is generated when an element is first inserted in to the dom, but isn't updated if the cascade changes. While it's technically possible to update when the cascade changes, it disgustingly slow (see: Bubble Example).