Добавление класса 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;
}