Le_Traceur_Snork
@Le_Traceur_Snork
PHP-программист | Wordpress

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

У меня есть 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

zhkx2.png

Свойство 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 вообще

Вопрос: это баг, фича, как это можно обойти?
  • Вопрос задан
  • 63 просмотра
Решения вопроса 1
Le_Traceur_Snork
@Le_Traceur_Snork Автор вопроса
PHP-программист | Wordpress
Нет, обойти нельзя, причина в том, что :visited признан небезопасным псевдоэлементом и потому может быть кастомизирован очень ограниченным количеством свойств:
color, background-color, border-*-color, outline-color и атрибут color у тегов fill и stroke
https://hacks.mozilla.org/2010/03/privacy-related-...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы