Добавление CSS-класса на псевдо-элемент

мне было интересно, есть ли способ добавить класс CSS к псевдо-элементам, таким как :after.

Я хочу использовать :после добавления сообщения об ошибке. Я также хочу, чтобы сообщение об ошибке было стилизовано так же, как и другие сообщения об ошибках.

это работает:

.error:after {
  content: "Error Message";
  color: red;
}

но могу ли я сделать что-то подобное, чтобы добавить больше, чем стиль цвета?:

.error:after {
  content: "Error Message";
  class: error_message_styles;
}

кроме того, есть ли разница между использованием "::после" vs ":после"?

спасибо вперед!

16
css pseudo-element

2 ответов

нет никакого способа дать HTML-атрибут любого рода элементу psuedo.

просто используйте селектор дважды:

.error:after {
  content: "Error Message";
}
.error:after, .error-style {
  color:red;
}

кроме того, есть ли разница между использованием "::после" vs ":после"?

согласно этому:

https://developer.mozilla.org/en/CSS/:after

на ::after нотация была введена в CSS 3, чтобы установить дискриминация между псевдо-классы и псевдо-элементы. Броузеры также примите обозначение :after введено в CSS 2.

Примечание: Microsoft Internet Explorer 8 поддерживает: после обозначения только.

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

14

на :after элемент не является физическим элементом DOM, поэтому он не может принимать класс.

Если вы используете библиотеку стилей, как меньше, вы можете смешивать стили из других классов, включив класс в качестве свойства:

.error {
    .error-styles;
}
1