Pseudo-Elementos CSS

Desde los laboratorios de Adobe es que nos llega este fantástico experimento. Se trata de un documento en donde podremos encontrar distintas implementaciones de los Pseudo-Elementos de CSS, tanto para propiedades que ya están validadas por el W3 como así también varias propuestas interesantes para un futuro no muy lejano.

CSS Pseudo elements contiene una extensa documentación sobre el uso de dos pseudo elementos que hoy por hoy son imprescindibles, y que logran ahorrar muchísimas lineas de código que antes no hubiesen sido posible economizar, estoy hablando de ::Before y ::After.

Utilizar los pseudo elementos nos brinda enormes ventajas, un mejor control del flujo del documento, un sustancial ahorro de recursos, y sobretodo una enorme facilidad a la hora de escribir hojas de estilo eficientes y reutilizables.

Ejemplo de pseudo elementos:

<style type="text/experimental-css">
#host::before(1){
	content: "3";
}
#host::before(2){
	content: "2";
}
#host::before(5){
	content: "1";
}
#host::after(1){
	content: "A";
}
#host::after(2){
	content: "B";
}
#host::after(5){
	content: "C";
}
</style>

El resultado se vería similar a esto:

Este tipo de recursos es ideal para leer cuando tenemos unos minutos libres, les recomiendo leer la documentación que se encuentra en la descarga, en ella van encontrar decenas de buenos ejemplos de uso de pseudo elementos, como así también una serie de planteos sobre problemas de su utilización, y lo que es mejor, como solucionarlos. Recuerden que este trabajo fue realizado por Adobe, por lo que probablemente el w3 lo tenga muy en cuenta para posibles versiones de CSS.

Web:  CSS Pseudo elements