Экранирование тега с помощью :: after

Question

У меня есть несколько ссылок, которые выглядят так:

<p class="links">
   <a>Link 1</a>
   <a>Link 2</a>
</p>

.links a::after {
content: " - ";
}

Проблема в том, что тег ::after выбирает тег a, а добавляемый к нему - меняет цвет и стиль для соответствия ссылке, например так:

<a>Link 1::after</a>
<a>Link 2::after</a>

Как мне сделать так, чтобы это выглядело так:

<a>Link 1</a>::after
<a>Link 2</a>::after

Answer 1

В ваш селектор после, добавьте следующие атрибуты:

text-decoration: none;
color: black;