seleccionar - pseudo elements css

Añadiendo clase CSS en un pseudo-elemento

Question

Me preguntaba si hay una manera de agregar una clase CSS a los pseudo-elementos, como: después.

Quiero usar: después de anexar un mensaje de error. También quiero que el mensaje de error tenga el mismo estilo que los otros mensajes de error.

Esto funciona:

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

¿Pero puedo hacer algo como esto para agregar más que el estilo de color ?:

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

Además, ¿hay alguna diferencia entre usar ":: after" vs ": after"?

¡Gracias por adelantado!

Answer 1

El elemento :after no es un elemento DOM físico, por lo que no puede tomar una clase.

Si usa una biblioteca de hojas de estilo como LESS , puede mezclar los estilos de otras clases incluyendo la clase como una propiedad:

.error {
    .error-styles;
}

Answer 2

No hay forma de dar un atributo HTML de ningún tipo a un elemento psuedo.

Solo usa el selector dos veces:

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

Además, ¿hay alguna diferencia entre usar ":: after" vs ": after"?

De acuerdo a esto:

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

La ::after notación ::after se introdujo en CSS 3 para establecer una discriminación entre pseudo-clases y pseudo-elementos. Los navegadores también aceptan la notación :after introducidos en CSS 2.

Nota: Microsoft Internet Explorer 8 admite: después de la notación solamente.

Yo diría que los mensajes de error pueden ser contenido, no decoración, pero esa es su decisión.