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.
see example without display:inline-block
- notice problem.
Comments
Post a Comment