Menu
<!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 
, but I get 
instead, only when running on Internet Explorer (any version).
Is this a bug or I'm doing something wrong?
498
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.
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
