Getting the pseudo elemente :before/:after working in IE 7

I am trying to get these to work in IE 7 but I am having problems. I downloaded and included the jQuery plugin for it in the header like this:

<!--[if lte IE 7]>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.pseudo.js"></script>

But it’s still not working.

  • how to select a particular tab from other page using anchor tag in JQuery..?
  • Google Maps using JavaScript is not displaying properly in jQuery tab
  • How to check if a css rule exists
  • Div set to display:none in css class - why can't I override it and show the div in the body?
  • How to place one element exactly to the same visible position, as another?
  • Applying animation delay causing elements to disappear
  • Here is the code from the jQuery plugin..

        var patterns = {
            text: /^['"]?(.+?)["']?$/,
            url: /^url\(["']?(.+?)['"]?\)$/
        function clean(content) {
            if(content && content.length) {
                var text = content.match(patterns.text)[1],
                    url = text.match(patterns.url);
                return url ? '<img src="' + url[1] + '" />': text;
        function inject(prop, elem, content) {
            if(prop != 'after') prop = 'before';
            if(content = clean(elem.currentStyle[prop])) {
                $(elem)[prop == 'before' ? 'prepend' : 'append'](
        $.pseudo = function(elem) {
            inject('before', elem);
            inject('after', elem);
            elem.runtimeStyle.behavior = null;
        if(document.createStyleSheet) {
            var o = document.createStyleSheet(null, 0);
            o.addRule('.dummy','display: static;');
            o.cssText = 'html, head, head *, body, *.before, *.after, *.before *, *.after * { behavior: none; } * { behavior: expression($.pseudo(this)); }';

    I thought it might have something to do with having to change the $ characters to jQuery since I am using WordPress and WP reserves the $ character for prototype, but that didn’t work either; it stopped the JS errors, but it still didn’t work.

  • How to add CSS class dynamically to html element
  • Load mobile CSS if user is on Android
  • Should I inline all CSS and JS for a static SPA?
  • webkit-transform overwrites z-index ordering in Chrome 13
  • Element height from within an AngularJS directive
  • TinyMCE - external toolbar position
  • 2 Solutions collect form web for “Getting the pseudo elemente :before/:after working in IE 7”

    Why not use ie7-js (a JavaScript library to make MSIE behave like a standards-compliant browser)?

    It will fix :before, :after and many other issues.

    Modernizr also supports the :before and :after psuedo elements in IE7 and many other browsers besides. From the docs:

    We support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. On mobile, we support iOS’s mobile Safari, Android’s WebKit browser, Opera Mobile, Firefox Mobile and whilst we’re still doing more testing we believe we support Blackberry 6+.