html - 画像の下のリンクを削除する方法 (ただし、テキストは保持する)?

Question

テキストと画像のリンクがありました。画像の下に下線を付けたくありませんが、テキストには下線を付けたいです。これらを2つの別々のリンクに分割せずにこれをサポートする方法はありますか? ここに例の写真があります：

Answer 1

いいえ、リンクを 2 つの部分に分割せずにそれを達成する方法はありません。

別の方法としてborder-bottom: 1px solid #000、テキストを含む要素に配置することもできますが、これはネイティブの A 要素と同じようには動作しません。ホバー、アクティブ、および訪問済みの状態では、少なくとも JavaScript の介入がなければ動作しません。

Answer 2

次のような構造を簡単に実行できます。

<a><span>text</span><img /></a>

その後、 から下線を削除し、 に下線aを適用できますa span。

デモはこちら: http://jsfiddle.net/chrisvenus/pdrz9/

以下は機能しないことに注意してください。

img {
  text-decoration: none;
}