Использование :: after для ссылок в тексте, но исключая связанные изображения

Question

Демо

Я использую

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

для оформления ссылок.Это работает:

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

К сожалению, теперь я получаю «» после связанных изображений, чего я не хочу:

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

Что я должен изменить, чтобыполучить «» «после связанных слов, но не после связанных изображений?

Answer 1

Вы можете попытаться скрыть символ под изображением, используя отрицательное поле:

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>

Answer 2

Не знаю, понимаю ли я вашу проблему, но если вам нужен только символ в текстах, вы можете использовать классы для его разграничения.

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

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

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