Apply Border-bottom to link but not to image

Asked

Viewed 22 times

1

I have a problem that seems simple, but I haven’t found a solution. I created a link style that instead of having a text-Decoration underline, I want a bottom edge.

The problem is that if an image has a link, I want to remove the border.

I’m trying this code, but the pseudo-class :not, is not being applied to the image, so I have a border image underneath every time I insert a link into it.

.post-body a:not(img) {
  padding-bottom: 1px;
  border-bottom: 1px solid #000;
}

.post-body a img {
  padding-bottom: 0;
  border-bottom: none;
}
<div class="post-body">
  <a href="#">
  Link
  </a>
</div>
<br /> Imagem sem link:
<div class="post-body">
  <img src="https://source.unsplash.com/WLUHO9A_xik/200x150" />
</div>
Imagem com link:
<div class="post-body">
  <a href="#">
    <img src="https://source.unsplash.com/WLUHO9A_xik/200x150" />
  </a>
</div>

How to apply the border only to links and not to images+links using CSS?

css image pseudo-classes

  • I’ve already updated...

  • I already say that a:not(img) does not work because the selector says "a tag a other than a tag img", but obviously no a will be img.

  • Hmm, I get it. But then it would be impossible to apply a style to a link that wasn’t an image, or otherwise?

1 answer

2


It is possible. Just put a class in the tag a where you don’t want to edge and add that class into the :not():

.post-body a:not(.semborda) {
  padding-bottom: 1px;
  border-bottom: 1px solid #000;
}
<div class="post-body">
  <a href="#">
  Link
  </a>
</div>
<br /> Imagem sem link:
<div class="post-body">
  <img src="https://source.unsplash.com/WLUHO9A_xik/200x150" />
</div>
Imagem com link e sem borda:
<div class="post-body">
  <a href="#" class="semborda">
    <img src="https://source.unsplash.com/WLUHO9A_xik/200x150" />
  </a>
</div>

Browser other questions tagged css image pseudo-classes

You are not signed in. Login or sign up in order to post.