Text-alignment of generated content in Internet Explorer 8

问题

I'm debugging this site and trying to sort out some issues that arise in Internet Explorer (big surprise).

I'm adding a sub-title to several links as follows:

.subtitle a:after {
    content:"The Subtitle Here";
}

On all modern browsers (and IE9) the content is center aligned because the container uses text-align:center;. However, in IE8 "The Subtitle Here" is flushed left.

Is there any way to control that with CSS?

Thanks.

回答1:

Turns out you can do it easily:

I added another style rule that targets the added content...

.subtitle a:after {
    text-align:center;
}

I guess IE9 and other browsers inherit the text-align property for :after content but IE8 doesn't. IE always keeps it interesting...

回答2:

text-align:center

didn't work for me. This is how i got it fixed in IE8. (I have a seperate style sheet 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.

回答3:

Neither of the answers above worked for me because of an underlying issue I had. Apparently IE8 does not support ::after, I changed it to :after and it worked just as intended.

Worth checking for!

来源：https://stackoverflow.com/questions/9996212/text-alignment-of-generated-content-in-internet-explorer-8