html - 定位 anchor 元素中的文本而不是图像

Question

我不希望图片有下划线，但是我需要文字中的超链接有下划线。我怎样才能做到这一点？这是一个 wordpress 主题，所以我无法更改 html，我必须使用 css

.post-desc a{
    border-bottom: 1px solid #FBCF00;
}
.post-desc a img{
    border-bottom: none;
}

<div class="post-desc">
<a href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763"><img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438"></a>
  </div>

Answer 1

你可以使用 display:table; on image 将其从图像下移除，如下所示:

.post-desc a img{
    border-bottom: none;
    display:table;
}

片段:

.post-desc a {
  border-bottom: 1px solid #FBCF00;
}
.post-desc a img {
  border-bottom: none;
  display: table;
}

<div class="post-desc">
  <a href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763">
    <img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438">
  </a>
</div>