Добавление класса CSS в псевдоэлемент
Мне было интересно, есть ли способ добавить класс CSS к псевдоэлементам, например: after.
Я хочу использовать: после добавления сообщения об ошибке. Я также хочу, чтобы сообщение об ошибке было написано так же, как и другие сообщения об ошибках.
Это работает:
.error:after {
content: "Error Message";
color: red;
}
Но могу ли я сделать что-то подобное, чтобы добавить больше, чем стиль цвета?:
.error:after {
content: "Error Message";
class: error_message_styles;
}
Кроме того, существует ли разница между использованием ":: after" vs ": after"?
Спасибо заранее!
Ответы
Ответ 1
Невозможно передать атрибут HTML любого типа в элемент psuedo.
Просто используйте селектор дважды:
.error:after {
content: "Error Message";
}
.error:after, .error-style {
color:red;
}
Кроме того, существует ли разница между использованием ":: after" vs ": after"?
В соответствии с этим:
https://developer.mozilla.org/en/CSS/:after
Обозначение ::after
было введено в CSS 3, чтобы установить дискриминация между псевдоклассами и псевдоэлементами. Браузеры также принять обозначение :after
, введенное в CSS 2.
Примечание. Microsoft Internet Explorer 8 поддерживает: после нотации только.
Я бы сказал, что сообщения об ошибках могут быть содержимым, а не украшением, - но это ваш вызов.
Ответ 2
Элемент :after
не является физическим элементом DOM, поэтому он не может принимать класс.
Если вы используете библиотеку стилей, например LESS, вы можете смешивать стили других классов, включив класс в качестве свойства:
.error {
.error-styles;
}