Question

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.

Answer 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…