Using a::after for links in text but exclude linked images

Question

I'm using

a::after {
  content: " »";
}

to style links. It works:

<a href="#">Some linked Text</a>

Sadly I now get a „»“ after linked images, what I don't want that:

<a href="#"><img src="test.jpg"></a>

What do I have to change in order to get „»“ after linked words, but not after linked images?

Possible duplicate of [CSS selector - element with a given child](https://stackoverflow.com/questions/4220327/css-selector-element-with-a-given-child) — Heretic Monkey, Oct 07 '18 at 16:28

score 2 · Answer 1 · answered Oct 07 '18 at 16:24

I don't know if I understand your problem, but if you only want the simbol in texts, you can use classes to delimit it.

.text::after {
  content: " »";
}

<a href="#" class="text">Some linked Text</a> 
<br><br>

<a href="#" class="img"><img src="test.jpg"></a>

score 1 · Accepted Answer · answered Oct 07 '18 at 17:34

1

You can try to hide the symbol under the image using negative margin:

a::after {
  content: " »";
}
a img {
  margin-right:-13px;
  position:relative;
  vertical-align:top;
}

<ul>
  <li><a href="#">Some linked Text</a> </li>
  <li>
    <a href="#"><img src="https://picsum.photos/100/100?image=0"></a>
  </li>
</ul>

answered Oct 07 '18 at 17:34

Temani Afif

This works for me, but it's a pitty, that there is no CSS selector for element with a given child – user3656083 Oct 15 '18 at 18:11

score 0 · Answer 3 · answered Dec 22 '22 at 10:33

0

You can use the :has pseudo-class

a:after {
    content: " »";
}
a:has(img):after {
    content: '';
}

answered Dec 22 '22 at 10:33

Radu Dragomir

3 Answers3