定位锚元素中的文本而不是图像

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>

- U. D.

---

这是完整的网站链接，可以查看问题：http://www.montrealguidecondo.ca/news/tod-condo-a-boisfranc/ - U. D.

你的锚点标签里面没有任何文本？你想要下划线的是什么？ - Danield

Answer 1

你可以在图像下使用display:table;来删除它，如下所示：

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

Snippet:

.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>

- The Process

Answer 2

为了简单起见，您可以使用负值的vertical-align将img下移到基线以下所需的位置：

a {
  border-bottom: solid;
}
a img {
  vertical-align: -0.5em;/* average -0.25em equals vertical-align:bottom */
 /* demo purpose: see border under img */
 opacity:0.75;
}

<a href="#">text</a>
<a href="#">
  <img src="http://dummyimage.com/60" />
</a>

在您网站的最后一个样式表中，测试这个。

a img {
  margin-top:0.5em;
  vertical-align:  -0.5em;
}

或者，如果你更喜欢：

a img {
  position:relative;
  top: 0.5em;
}

这个想法是通过图片本身来隐藏边框。

- G-Cyrillus

Answer 3

文本装饰下划线

<div><a style="text-decoration:underline" 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>

- DivineChef

---

我想使用：border-bottom: 1px solid #FBCF00; 作为颜色，但需要在图像下面删除它。 - U. D.

Answer 4

您已经在 <a> 标签上设置了边框属性，因此不能仅仅在包含的 <img> 元素上删除它们。不幸的是，在 CSS 中没有 "包含"选择器（尚未），显然您也无法编辑 HTML，因此我们必须坚持我们已经得到的信息。

带有包含图像的链接在属性 rel 中有单词 attachment。以下是如何选择它们并禁用其边框：

a[rel~="attachment"] {
    border-bottom: none !important;
}

- Fabian Horlacher