Text alignment of generated content in Internet Explorer 8
I am debugging this site and trying to sort out some problems with Internet Explorer (big surprise).
I add subheading to multiple links like this:
.subtitle a:after {
content:"The Subtitle Here";
}
In all modern browsers (and IE9), content is centered as the container uses text-align:center;
. However, in IE8, "Subtitles Here" turned red on the left.
Is there a way to control this with CSS?
Thank.
It turns out you can do it easily:
I added another style rule that targets the added content ...
.subtitle a:after {
text-align:center;
}
I think IE9 and other browsers inherit the property text-align
for content :after
, but IE8 doesn't. IE is always interesting ...
text-align:center
didn't work for me. This is how I fixed it in IE8. (I have a separate stylesheet for IE8)
.printIcon:after {
content: "Print" !important;
text-align: center !important;
margin-top: 25px !important;
position:relative !important;
left:25px !important;
}
Hope this helps someone.
None of the answers above worked for me due to the underlying problem I was having. Apparently IE8 doesn't support ::after
, I changed it to :after
and it worked as expected.
Worth checking out!