Targeting the text in an anchor element but not the image

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

here is the full site to see the probleme: http://www.montrealguidecondo.ca/news/tod-condo-a-boisfranc/ — U. D., Feb 29 '16 at 22:20
I don't see any text in your anchor tag? What exactly do you want to underline? — Danield, Feb 29 '16 at 23:14

score 2 · Accepted Answer · answered Feb 29 '16 at 22:29

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>

G-Cyrillus · Answer 2 · 2016-02-29T23:33:12.950

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

<a href="#">text</a>
<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

score 0 · Answer 3 · answered Feb 29 '16 at 22:08

0

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>

answered Feb 29 '16 at 22:08

DivineChef

1,211
1
10
27

I want to use : border-bottom: 1px solid #FBCF00; for the color but it need to be remove under the image – U. D. Feb 29 '16 at 22:17

score 0 · Answer 4 · edited May 23 '17 at 12:23

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

Targeting the text in an anchor element but not the image

4 Answers4