bruce965 bruce965 - 1 year ago 60
HTML Question

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

<!DOCTYPE html>
div:before {
display: table-cell;
content: "ABC";
color: red;

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?

Answer Source

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.