Direction: rtl not working on IE11
I have an email obfuscation setup according to this question
CSS
.e-mail:before {
content: attr(data-website) "\0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
HTML:
<span class="e-mail" data-user="otcatnoc" data-website="moc.shtopurg">
But it doesn't work on IE 11 ... any ideas on how to fix this or what I did wrong?
Any help would be appreciated, thanks
+3
source to share
1 answer
You are not doing anything wrong, so don't worry. It's just that IE, although it knows about the: rtl direction, forgets to apply it to: before.
One way to make it work is to create a span rtl container so that the entire range, including its: to, changes. So give the id p and style it.
#mailbox {
direction: rtl;
unicode-bidi: bidi-override;
text-align: left;
}
.e-mail:before {
content: attr(data-website)"\0040" attr(data-user);
}
<p id="mailbox">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="e-mail" data-user="otcatnoc" data-website="moc.shtopurg"></span>
</p>
Works in all browsers I've tested on (FF 3.6 and up, Chrome 20 and up, IE8 and up).
+4
source to share