html - href から hover スタイルを継承する href 内のスパンを停止する

Question

問題

ないスパンが必要text-decoration: underlineです。とにかくマークアップを変更することはできません。これは可能ですか？

マークアップ

<a href="#">
    Working test
    <span>▼&lt;/span>
</a>

CSS

a:hover {
    text-decoration: underline;
}

a:hover span {
    text-decoration: none;
}

Answer 1

このjsFiddle の例を試してください。すべての最新ブラウザと IE8+ で動作します。

a {
    text-decoration:none;
    position:relative;
    padding-right:16px;
}
a:hover {
    text-decoration: underline;
}
span {
    text-decoration: none;
    position:absolute;
    right:0;
}

Answer 2

そうではないと思います。

あなたが遭遇しようとしている問題は<a>、CSS で下線が設定されているアンカーの内側にあるため、親要素 ( anchor ) がスパンのどこにでも下線を持つことです。マークアップを変更できる場合は、以下のようなものを使用できます。これにより、下線を引きたい (スパンでラップされた) アンカーの部分にのみ下線が適用されます。

<a href="#"><span class="nounderline">No</span> <span class="underline">Underline</span></a>

a {
  text-decoration: none;
}
span.underline {
  text-decoration: underline;
}

しかし、現在のマークアップのように、それを行う方法はありません。