Pseudo Elements - best practice to "over-ride" the parent of a pseudo-element

Question

I want to add the href of a link after the link using a pseudo-element but not keep the parent's text-decoration. The code below shows "a" and "a:after" having different text-decoration.

a 
{
text-decoration: none;
color:#000000;
}

a:after 
{
content:  attr(href);
color:#999999;
text-decoration: underline;
padding-left: 10px;
}

Even though the text-decoration is set differently both "a great link" and "www.stackoverflow.com" have the same text-decoration. (See below)

<a href="wwww.stackoverflow.com">a great link</a> wwww.stackoverflow.com

Changing the text-decoration of the pseudo-element doesn't work as it's specificity is 1. The only way I can solve the problem is by adding a span to the link itself.

.underline-kludge
{
text-decoration:underline;
}

<a href="wwww.stackoverflow.com"><span class="underline-kludge">a great link</span></a> wwww.stackoverflow.com

I'm not happy with this solution. Is there a better way? Do I have to add spans to links to solve this problem?

EDIT - EDIT - EDIT

I would like like the pseudo class (a:after) to have a different text-decoration than the parent. I can't do an over-ride of the parent text-decoration using css alone. The only way I see how to do it is by adding a span which I would rather not do.

Answer 1

This is actually a really good question - it stumped me for a while.

Simply set display:inline-block on the :after pseudo element, therefore allowing text-decoration:none to take effect; and thus not be overwritten.

Working jsFiddle here

---

See a example without display:inline-block - you will notice the problem.