疑似要素を使用してリンクの後にリンクの href を追加したいが、親のテキスト装飾は保持したくない。以下のコードは、「a」と「a:after」のテキスト装飾が異なることを示しています。
a
{
text-decoration: none;
color:#000000;
}
a:after
{
content: attr(href);
color:#999999;
text-decoration: underline;
padding-left: 10px;
}
text-decoration の設定が異なっていても、「a great link」と「www.stackoverflow.com」の text-decoration は同じです。（下記参照）
<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:after) に、親とは異なるテキスト装飾を持たせたいと考えています。CSS だけを使用して、親のテキスト装飾をオーバーライドすることはできません。私がそれを行う方法を理解する唯一の方法は、私がやりたくないスパンを追加することです。