Как написать :hoverи :visitedусловие дляa:before ?
Я пытаюсь, a:before:hoverно это не работает
Как написать :hoverи :visitedусловие дляa:before ?
Я пытаюсь, a:before:hoverно это не работает
Ответы:
Это зависит от того, что вы на самом деле пытаетесь сделать.
Если вы просто хотите применить стили к :beforeпсевдоэлементу, когда aэлемент соответствует псевдоклассу, вам нужно написать a:hover:beforeили a:visited:beforeвместо этого. Обратите внимание, что псевдоэлемент идет после псевдокласса (и фактически, в самом конце всего селектора). Обратите также внимание, что это две разные вещи; называя их обоими «псевдоселекторами», вы можете запутаться, если столкнетесь с такими проблемами синтаксиса, как эта.
Если вы пишете CSS3, вы можете обозначить псевдоэлемент двойными двоеточиями, чтобы сделать это различие более понятным. Отсюда a:hover::beforeи a:visited::before. Но если вы разрабатываете для устаревших браузеров, таких как IE8 и старше, то вы можете просто обойтись без использования двоеточий.
Этот конкретный порядок псевдоклассов и псевдоэлементов указан в спецификации :
Один псевдоэлемент может быть добавлен к последней последовательности простых селекторов в селекторе.
Последовательность простых селекторов представляет собой цепочку простых селекторов, которые не разделенных комбинатора. Он всегда начинается с селектора типа или универсального селектора. Никакой другой тип селектора или универсальный селектор не допускается в последовательности.
Селектор простого либо селектор типа, универсальный селектор, селектор атрибута, селектор класса, селектор идентификатора, или псевдо-класс.
Псевдокласс - это простой селектор. Псевдоэлемент, однако, нет, хотя он и напоминает простой селектор.
Однако для псевдоклассов действий пользователя, таких как :hover1 , если вам нужно, чтобы этот эффект применялся только тогда, когда пользователь взаимодействует с самим псевдоэлементом, но не с этим aэлементом, то это невозможно, кроме как через неясный обходной путь, зависящий от макета. , Как следует из текста, стандартные псевдоэлементы CSS в настоящее время не могут иметь псевдоклассы. В этом случае вам потребуется применить :hoverк фактическому дочернему элементу вместо псевдоэлемента.
1 Конечно, это не относится к псевдоклассам ссылок, как, :visitedнапример, в вопросе, поскольку псевдоэлементы не являются ссылками.
text-decoration.
Напишите a:hover::beforeвместо a::before:hover: пример .
:afterпротив CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (сингл :имеет лучшую поддержку)
Чтобы изменить текст ссылки меню при наведении курсора. (Разный язык текста при наведении) вот
HTML:
<a align="center" href="#"><span>kannada</span></a>CSS:
span {
font-size:12px;
}
a {
color:green;
}
a:hover span {
display:none;
}
a:hover:before {
color:red;
font-size:24px;
content:"ಕನ್ನಡ";
}a:hover::beforeс text-decoration: underline, что приводит к тому , подчеркивание , чтобы забрать красный цвет текста замены.
Попробуйте использовать .card-listing:hover::after hoverи afterиспользовать ::его, будет работать
BoltClock ответ правильный. Единственное, что я хочу добавить, это то, что если вы хотите выбрать только псевдоэлемент, поместите его в span.
Например:
<li><span data-icon='u'></span> List Element </li>вместо того:
<li> data-icon='u' List Element</li>Таким образом, вы можете просто сказать,
ul [data-icon]:hover::before {color: #f7f7f7;}который будет выделять только псевдоэлемент, а не весь элемент li
Вы также можете ограничить свое действие только одним классом, используя правую остроконечную скобку (">"), как я сделал в этом коде:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size:12px;
}
a {
color:green;
}
.test1>a:hover span {
display:none;
}
.test1>a:hover:before {
color:red;
content:"Apple";
}
</style>
</head>
<body>
<div class="test1">
<a href="#"><span>Google</span></a>
</div>
<div class="test2">
<a href="#"><span>Apple</span></a>
</div>
</body>
</html>Примечание. Переключатель hover: before работает только для класса .test1