Targeting the text in an anchor element but not the image - html

Question

I do not want the picture to be underlined, but I need the hyperlink in the text to be underlined. How can I do that? It is a wordpress theme so I can't change the html I have to stay with css
.post-desc a{
border-bottom: 1px solid #FBCF00;
}
.post-desc a img{
border-bottom: none;
}
<div class="post-desc">
<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">
</div>

Answer 1

You can remove it under the image using display:table; on image, like this:
.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>

Answer 2

to make it simple you may use vertical-align with a negative value to drop img as much as needed under the base line:
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;
}
text
<a href="#">
<img src="http://dummyimage.com/60" />
</a>
within the last stylesheet of your website , test this
a img {
margin-top:0.5em;
vertical-align: -0.5em;
}
or if you like better:
a img {
position:relative;
top: 0.5em;
}
The idea is to hide the border with the image itself

Answer 3

Text decoration underline
<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>

Answer 4

You have set the border attributes on the <a> tags, so you can't just remove them on the containing <img> elements. Unfortunately, there is no "conatining" selector in css (yet) and apparently you can't edit the html, so we have to stick with the informations we've got.
The links with the containing images have the word attachment in the attribute rel. This is how to select them and disable their border:
a[rel~="attachment"] {
border-bottom: none !important;
}