css - 带边框的 anchor 文本 -> 排除图像

Question

我想将 border-bottom: solid 2px 应用于 anchor (因为它看起来比 text-decoration: underline 好得多，但我想排除其中的图像获得边界底部的 anchor 。

<a>I have a border</a>

<a>I have a border too <img src="img.jpg" title="I have no border" /></a>

我的猜测是

a > * {
    border-bottom: solid 2px;
}

a > img {
     border-bottom: none;
}

但这行不通，因为 > * 需要 anchor 内的元素，它不适用于原始文本。

Answer 1

如果不使用 span，我看不到一个清晰的答案:

HTML

<a>No border<img alt="No border"/><span>Border</span></a>

CSS

a > span {
    border-bottom: solid 2px;
}