Podemos decir que los psudo-element son aquellos que sirven para poder emplear estilos a secciones en concreto dentro de alguna etiqueta. O sea, con un ejemplo especifico; la etiqueta del párrafo, con los pseudo element se conseguiría plasmar ese estilo para la inicial letra del párrafo y de su primera línea. Me refiero a que, con CSS se consigue concretar todo estilo de una etiqueta, pero usando los pseudo elements no se van a restringir al momento de plasmar todo estilo para la información de esa etiqueta, sino que se debe señalar el estilo para una sección limitada de la etiqueta.
Hay distintos tipos de pseudo elements con diferentes empleos, con el cual se puede plasmar todo estilo en varias cosas, como se verá a continuación:
Pseudo-element first-letter
Este es un efecto corriente de diversas publicaciones, por ejemplo, esas de cuentos para los pequeños, es lograr hacer más grande la letra inicial de una página con el fin de decorarla de alguna forma. Con CSS se lograría emplear distintos estilos concretos y conseguir, por ejemplo, que esa primera letra se vea más enorme y con un color diferente.
P:first-letter { font-size: 200%; color: #993333; font-weight: bold; }
Con ello se conseguirá la asignación de un tamaño de letra 200% más grande del propio del párrafo. Asimismo, se está modificando su color de esa primera letra.
De entre todas las propiedades de estilos, sólo diversas se lograrían emplear a los pseudo-elementos first-letter. Son las siguientes, ya sea por la descripción del W3C: font properties, color properties, background properties, ‘text-decoration’, ‘vertical-align’ (sólo si ‘float’ está asignado a ‘none’), ‘text-transform’, ‘line-height’, margin properties, padding properties, border properties, ‘float’, ‘text-shadow’ y ‘clear’.
Pseudo-element first-line
De igual manera, este pseudo-element trabaja al momento de asignar algún estilo propio dentro de la primera línea de todo texto. Es viable que se haya observado en alguna revista o periódico que se maneje ese estilo con el fin de recalcar toda primera línea del párrafo.
P:first-line { text-decoration: underline; font-weight: bold; }
Toda propiedad del estilo se lograría emplear al pseudo-element first-line son las siguientes: font properties, color properties, background properties, ‘word-spacing’, ‘letter-spacing’, ‘text-decoration’, ‘vertical-align’, ‘text-transform’, ‘line-height’, ‘text-shadow’ y ‘clear’.
Manejo de clases con los pseudo-elements
Dentro de concretas situaciones se puede requerir la utilización de una clase (class) de CSS en donde se le debe asignar los preuso-elements, de manera que esos no se empleen en todas las etiquetas de la web. O sea, se pudiese querer que simplemente se altere el estilo de la línea inicial en el texto con diversos párrafos y no en toda la web.
Esta clase de concreta debido al nombre de su etiqueta continuando con el punto y el nombre de su clase. Asimismo, si se quiere definir un preuso-elements, tendría que señalarse de la siguiente manera:
P.nombreclase:first-line { font-weight: bold; }
Pseudo-elementos en CSS2
Además del first-line y first-letter, dentro de toda especificación de CSS 2 hay otros pseudo elements el cual son Before y After, éstos sirven para añadir “contenido generado” antes y después de cada componente al cual se le asigne el psudo-element.
Un ejemplo de ello es:
P.nota:before { content: “Nota: ” }
