Объедините a: посещенный с помощью: после или цепочки псевдоклассов с псевдоэлементами

Скажем, я хотел добавить фигуру (например, галочку) рядом со ссылкой после ее посещения, вместо того, чтобы она просто фиолетовая, используя: после и с: посещенным.

Я не уверен, что я должен выбрать такую ​​форму:

a:visited:after {

или вот так:

a:visited a:after

или

a:visited :after {

(я тоже немного нечеткий, когда мне нужно или не нужно добавлять пробел перед псевдоэлементом, или это даже имеет значение?)

или, может быть, что-то другое?

Прямо сейчас мой css выглядит так:

a:visited:after {
    /* check mark shape */
    content:'\00a0';
    color: black;
    position: relative;
    left:15px;
    display:inline-block;
    width: 3px;
    height: 6px;
    border: solid black;
    border-width: 0 2px 2px 0;  
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

код формы метки с http://webitect.net/design/webdesign/creating-fancy-bullet-points-with-pure-css3/

Спасибо за любую помощь.

Ответы

Ответ 1

Вы должны использовать a:visited:after, как вы сейчас делаете. Это не работает не из-за ошибки в вашем коде, а потому, что проблема заключается в псевдоклассе :visited - это не позволяет использовать псевдоэлементы из-за проблемы конфиденциальности.

Таким образом, вы не сможете применять свой значок галочки только к посещенным ссылкам.

Относительно этого:

(я тоже немного нечеткий, когда мне нужно или не нужно добавлять пробел перед псевдоэлементом, или это даже имеет значение?)

Это имеет значение, поскольку пространство представляет собой комбинатор потомков:

  • Селектор a:visited a:after представляет псевдоэлемент :after a, который является потомком другого a, который является посещенной ссылкой, которая в HTML не имеет смысла.

  • Селектор a:visited :after похож на a:visited a:after, за исключением того, что он представляет :after любого потомка a:visited.

    Его можно переписать как a:visited *:after. См. универсальный селектор в спецификации.

Опуская пробел, вы применяете псевдоэлемент непосредственно к элементу, представленному селектором перед ним, который в вашем случае a:visited, а не какой-либо из его потомков.