Agregar clase CSS en el pseudo-elemento

Question

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

Deseo utilizar: después de agregar 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 una diferencia entre el uso de ":: después" vs ": después"?

¡Gracias de antemano!

Answer 1

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

Sólo tiene que utilizar el selector dos veces:

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

Además, ¿hay una diferencia entre el uso de ":: después de" vs ": después de"?

De acuerdo con esto:

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

La notación ::after se introdujo en CSS 3 a fin de establecer una discriminación entre pseudo-clases y pseudo-elementos. Navegadores también aceptan la notación introducida en :after CSS 2.

Nota: Microsoft Internet Explorer 8 es compatible con el: 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.

Answer 2

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

Si utiliza una biblioteca de estilos como LESS, se pueden mezclar en los estilos de otras clases mediante la inclusión de la clase como una propiedad:

.error { 
    .error-styles; 
}