I'm re-asking this question because its answers didn't work in my case.
In my stylesheet for printed media I want to append the url after every link using the :after pseudo-class.
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
}
In Firefox (and probably Chrome but not IE8), text-decoration: none is ignored, and the underline stretches unattractively across the bottom of the url. The color however is correctly set to black for the url. Is there a way to make the text-decoration work?
The original question appended fixed size images instead of variable width text. Its answers use padding and background images to avoid having to use the text-decoration property. I'm still looking for a solution when the content is variable width text.
IE8's implementation of the :before and :after pseudo-elements is incorrect. Firefox, Chrome and Safari all implement it according to the CSS 2.1 specification.
5.12.3 The :before and :after pseudo-elements
The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content. They are explained in the section on generated text.
...
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
The specification indicates that the content should be inserted before or after the element's content, not the element (i.e. <element>content:before content content:after</element>). Thus in Firefox and Chrome the text-decoration you're encountering is not on the inserted content but rather on the parent anchor element that contains the inserted content.
I think your options are going to be using the background-image/padding technique suggested in your previous question or possibly wrapping your anchor elements in span elements and applying the pseudo-elements to the span elements instead.