定位錨文本中的文本但不包含圖像

我不希望圖片被加下劃線，但我需要文本中的超鏈接加下劃線。我怎樣才能做到這一點？這是一個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

定位錨文本中的文本但不包含圖像

回答

相關問題