Applying text-decoration on css generated content in IE

Question

It seems IE doesn\'t care for text-decoration: none; defined for a:before pseudo element (or pseudo class).

Here is a JS Fiddle: http://jsf

Answer 1

IE seems to be in error here, since display: block in your code should remove the underlining. According to clause 16.3 Decoration in the CSS 2.1 spec, “User agents must not render these text decorations on content that is not text. For example, images and inline blocks must not be underlined.”

There does not seem to a bug a report on this at the IE Feedback Home.

In this case, a suitable workaround might be to use an image as the generated content:

a:before {
    content: url(arrow.png);
}

where arrow.png refers to a suitable small icon. The use of url(...) in content is described in CSS3 Generated and Replaced Content Module, which is a seriously outdated draft (the last version is from 2003), but this part has been widely implemented in browsers. Not in IE 7, however. So if you wish to cover IE 7 as well, consider the approach in @EugeneXA’s answer, possibly generating the extra markup dynamically with JavaScript.