Почему :after не реагирует на изменение CSS-Custom-Property для свойств background-color и opacity, будучи расположенным у тега :visited?

Question

[Илья Салигжанов]

У меня есть SCSS такого вида:

SCSS такого вида

.link {
    --link-color: #{$purple--deep};
    --link-after-opacity: 0.2;

    //...
    color: var(--link-color) !important;

    &:after {
        content: '';
        //...
        background-color: var(--link-color);
        opacity: var(--link-after-opacity);
    }

    &:visited {
        --link-color: #{$dark-blue};
        --link-after-opacity: 1;

        color: $dark-blue !important;

        &:after {
            background-color: $dark-blue !important;
            opacity: 1;
        }
    }

    &:active,
    &:focus,
    &:focus-visible,
    &:focus-within,
    &:hover,
    &:target {
        --link-color: #{$purple--deep};
        --link-after-opacity: 1;

        color: var(--link-color) !important;

        &:after {
            background-color: var(--link-color) !important;
            opacity: var(--link-after-opacity);
        }
    }
}

И даже с таким отвратительным переопределением через !important и всякое, я получаю следующее:

Баг отображения a:visited:after

Свойство opacity не применяется к :after элементу, если он находится в :visited-родителе (хотя стили прямо указывают на структуру a:visited:after)
Помимо того, если убрать отвратительное переопределение стилей и оставить только CSS-пропсы:

Примерно вот такой структуры

.link {
    --link-color: #{$purple--deep};
    --link-after-opacity: 0.2;

    //...
    color: var(--link-color) !important;

    &:after {
        content: '';
        //...
        background-color: var(--link-color);
        opacity: var(--link-after-opacity);
    }

    &:visited {
        --link-color: #{$dark-blue};
        --link-after-opacity: 1;
    }

    &:active,
    &:focus,
    &:focus-visible,
    &:focus-within,
    &:hover,
    &:target {
        --link-color: #{$purple--deep};
        --link-after-opacity: 1;
    }
}

В таком случае даже background-color перестаёт переопределяться - получается, что :visited:after не реагирует на изменения CSS-Properties вообще

Вопрос: это баг, фича, как это можно обойти?

Answer 1

[Илья Салигжанов]

Нет, обойти нельзя, причина в том, что :visited признан небезопасным псевдоэлементом и потому может быть кастомизирован очень ограниченным количеством свойств:
color, background-color, border-*-color, outline-color и атрибут color у тегов fill и stroke
https://hacks.mozilla.org/2010/03/privacy-related-...

Comments

[ThunderCat]

для справки - ответы на собственные вопросы не учитываются в рейтинге. Так что зря расстарались...

[Илья Салигжанов]

Я не расстарался, а решал бизнес-задачу. Это обычный этикет сервисов с ответами - если сам решил, то пиши решение для будущих поколений.

P. S. Решил через Stackoverflow в любом случае, да и там тоже пометили дубликатов, так что...