定位锚文本中的文本但不包含图像

我不希望图片被加下划线，但我需要文本中的超链接加下划线。我怎样才能做到这一点？这是一个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>

来源

2016-02-29 Ulysse Dhidtléridoux

这里的边界是全现场看到，probleme：http://www.montrealguidecondo.ca/新闻/ tod-condo-a-boisfranc/ –

我的锚标签中没有看到任何文字？你想要强调什么？ – Danield

您可以将其删除在图像上使用display:table;在图像上，像这样：

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

来源

2016-02-29 22:29:11

非常感谢它，它完美的作品！ –

文本装饰强调

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

来源

2016-02-29 22:08:33 DivineChef

我想用：border-bottom：1px solid＃FBCF00;为颜色，但它需要被删除下图像 –

您已设置的<a>标签边框属性，因此你不能只是删除它们在含<img>元素。不幸的是，目前还没有"conatining" selector in css（显然你不能编辑html），所以我们必须坚持使用我们已有的信息。

含有图像的链接在属性rel中有词attachment。这是如何选择他们，并禁止他们的境界：

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

来源

2016-02-29 22:41:26

，使之简单，你可以使用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; 
}

的想法是隐藏与图像本身

来源

2016-02-29 23:19:01

定位锚文本中的文本但不包含图像

回答

相关问题