“text-decoration” and the “:after” pseudo-element, revisited

css cross-browser pseudo-element
palm3D picture palm3D · Aug 6, 2009 · Viewed 32.1k times · Source

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.

Answer

Elliott picture Elliott · Mar 28, 2013

If you use display: inline-block on the :after pseudo, the text-decoration declaration will work.

Tested in Chrome 25, Firefox 19

Related questions

css form checkbox styling with checked and after tags

I am trying to design a form without using JavaScript or JQuery. It includes a series of checkboxes. The idea is to display a certain gif after the checkbox if it is unchecked. Otherwise, display nothing after it. This is …

Read More
How to disable text selection highlighting

For anchors that act like buttons (for example Questions, Tags, Users, etc. which are located on the top of the Stack Overflow page) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally …

Read More
How do I style a <select> dropdown with only CSS?

Is there a CSS-only way to style a <select> dropdown? I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in …

Read More