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


i want add href of link after link using pseudo-element not keep parent's text-decoration. code below shows "a" , "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 text-decoration set differently both "a great link" , "www.stackoverflow.com" have same text-decoration. (see below)

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

changing text-decoration of pseudo-element doesn't work it's specificity 1. way can solve problem adding span 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 solution. there better way? have add spans links solve problem?

edit - edit - edit

i like pseudo class (a:after) have different text-decoration parent. can't over-ride of parent text-decoration using css alone. way see how adding span rather not do.

this question - stumped me while.

simply set display:inline-block on :after pseudo element, therefore allowing text-decoration:none take effect; , not overwritten.

working jsfiddle here


see example without display:inline-block - notice problem.


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -

php - Accessing static methods using newly created $obj or using class Name -