Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE not coloring :before as table-cell, why?

<!DOCTYPE html>
<html>
    <head>
        <style>
        div:before {
            display: table-cell;
            content: "ABC";
            color: red;
        }
        </style>
    </head>
    <body>
        <div>123</div>
    </body>
</html>

I'd expect this to render to something like expected, but I get actual instead, only when running on Internet Explorer (any version).

Is this a bug or I'm doing something wrong?

like image 498
Fabio Iotti Avatar asked Jul 11 '14 08:07

Fabio Iotti


1 Answers

This appears to be a bug in IE. If you inspect the element in IE 11 Developer Tools, you see all the declarations for the :before pseudo-element struck out (also e.g. font settings if you add them), but the display and content settings affect the rendering.

To circumvent this bug, it suffices in this simple case to set display: block as @BeatAlex suggests. In a more complicated situation, you probably need more complicated workarounds.

like image 143
Jukka K. Korpela Avatar answered Sep 20 '22 15:09

Jukka K. Korpela