Search code examples
cssinternet-explorer-7pseudo-class

:after pseudoclass on IE7

I have this code, that shows a little triangle using pure CSS, and it works on all modern browsers, including IE8-IE9:

<html>
<head>
    <style>
        .arrow:after {
            display: inline-block;
            width: 0;
            height: 0;
            margin: 4px 0 0 4px;
            vertical-align: top;
            text-indent:-9999px;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid black;
            content: "&darr;";
        }
    </style>
</head>
<body>
    <div class="arrow">testing</div>
</body>
</html>

The problem is that it is not working on IE7, it just does not display the arrow.

I have seen people suggesting to use ie8.js, but it doesn't work either.

Does anyone know how to make it work on IE7?

Solution

  • style .arrow in conditional comments specifically for ie7. ie7 doesn't understand :after,:before,:content or display:inline-block for that matter. without looking at the site, it's hard to offer a solid fix. offhand, i'd make it display:block; with a text-indent and use background-image.