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

Another solution is to set a small line-height (heightdoes work too) and set overflow: hidden so the underline disappears.

I know this is not the best solution, because the line-height value depends on the character you use. In this case 0.6 is a good value but maybe not for another character.

In my case it was a good solution because I had the problem with only one certain character with a fixed font-size.

a {
    text-decoration: underline;
}

a:before {
    content: ">";
    display: inline-block;
    text-decoration: underline; /* simulate IE behavior */
    line-height: 0.6; /* line-height must be smaller than font-size */
    overflow: hidden;
}

JSFiddle Demo