CODEWITHSUNDEEP
htmlcsscss-selectors
U. D.
U. D.

Reputation: 69

Targeting the text in an anchor element but not the image

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>

Upvotes: 4

Views: 72

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 106038

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

Upvotes: 1

Fabian Horlacher
Fabian Horlacher

Reputation: 1929

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

Upvotes: 0

The Process
The Process

Reputation: 5953

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>

Upvotes: 2

DivineChef
DivineChef

Reputation: 1221

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>

Upvotes: 0

Related Questions