僞元素 - 「過度騎」的一個僞元素

我想用一個僞元素添加一個鏈接的href鏈接後卻跟不上父母的文本修飾的父最佳實踐。下面的代碼顯示「a」和「a：after」具有不同的文字修飾。僞元素 - 「過度騎」的一個僞元素

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

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

即使文本裝飾設置不同的兩個「有很大的聯繫」和「www.stackoverflow.com」具有相同的文字修飾。（見下文）

<a href="wwww.stackoverflow.com">有很大的聯繫</a> wwww.stackoverflow.com

改變僞元素的文本修飾不能正常工作，因爲它的特殊性爲1。我能解決的唯一途徑問題是通過添加跨度到鏈接本身。

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

<a href="wwww.stackoverflow.com"><span class="underline-kludge">有很大的聯繫</span></a> wwww.stackoverflow.com

我不滿意這個解決方案。有沒有更好的辦法？我必須將鏈接添加到鏈接才能解決此問題嗎？

編輯 - 編輯 - 編輯

我想喜歡僞類（A：以後）有一個不同的文本修飾比父。我無法僅僅使用CSS來重寫父文本裝飾。我看到如何做到這一點的唯一方法是增加一個我不願意做的跨度。

來源

2013-10-06 Mayo

那麼..你想要最終結果是什麼？ 'a'加下劃線，但'：after'內容不加下劃線..？ –

您不需要'span' - 將'class =「underline-kludge」'添加到'a'標籤的工作方式非常乾淨。 – Brian

您的例子並不說明這裏，你最好提供一個[的jsfiddle]再現您的問題 –

其實，這是一個很好的問題 - 這難倒我了一會兒。

只需在:after僞元素上設置display:inline-block，因此允許text-decoration:none生效;因此不會被覆蓋。

Working jsFiddle here

See a example withoutdisplay:inline-block - 你會發現這個問題。

來源

2013-10-06 20:18:19

就是這樣。謝謝。我討厭使用跨度的想法。 – Mayo

僞元素 - 「過度騎」的一個僞元素

回答

相關問題