How Can I Make :after and :before CSS Pseudo-elements Work in Internet Explorer 7?

Internet Explorer 7 Support for :after and :before CSS Pseudo Elements

Despite their widespread use in modern browsers, :after and :before CSS pseudo elements fail to function correctly in Internet Explorer 7. This can be a significant hindrance for web developers relying on these features.

Hacking Solution

Unfortunately, there is no known pure CSS hack to resolve this issue. However, one effective solution is to utilize IE8.js, a JavaScript library that provides compatibility support for various Internet Explorer versions.

Implementation with IE8.js

To implement IE8.js, include the following script tag in your document:

<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>

This script will enable support for :after and :before pseudo elements in Internet Explorer 7. You can test its functionality at the following links:

• After: http://ie7-js.googlecode.com/svn/test/after.html
• Before: http://ie7-js.googlecode.com/svn/test/before.html

Conditional Implementation

To ensure that IE8.js is only loaded in Internet Explorer 6 and 7, you can use the following conditional comment:

jQuery Alternative

If you're already using jQuery, you can leverage the jQuery Pseudo Plugin to achieve similar functionality:

$("element").pseudo();

This plugin allows you to simulate the behavior of :after and :before pseudo elements in Internet Explorer 7.

The above is the detailed content of How Can I Make :after and :before CSS Pseudo-elements Work in Internet Explorer 7?. For more information, please follow other related articles on the PHP Chinese website!