Los pseudo-elementos
Los pseudo-elementos seleccionan alguna parte de un elemento y su sintaxis es similar a las pseudo-clases aunque a veces, en lugar de usar un carácter dos puntos se utilizan dos.
Los más sencillos de comprender son ::first-letter y ::first-line que permiten identificar la primera letra de un texto o la primera línea y establecer propiedades particulares para cada una de ellas.
El pseudo-elemento ::first-line puede usarse en cualquier elemento de bloque como p>, h1, etc o que posean la propiedad display con valores como block, inline-block, table-cell o table-caption. Hay que tener en cuenta que la primera línea no se refiere a lo que se separa por saltos de línea sino a la primera línea que muestra el navegador así que en estos ejemplos, la regla de estilo tiene resultados distintos aún cuando el texto sea el mismo porque lo que varía es el ancho
El pseudo-elemento ::first-letter permite establecer las propiedades de la primera letra de un párrafo. Es algo simple pero, debe tenerse muy en cuenta que ese párrafo debe comenzar con un texto y no funcionará si es precedido por una imagen, un salto de línea o cualquier otro tipo de contenido.
En ambos casos, no todas las propiedades tienen efecto, sólo las que afectan a las fuentes, al fondo, al color, algunas otras como text-decoration, text-shadow, text-transform, word-spacing, letter-spacing, line-height y vertical-align. El pseudo-elemento ::first-letter admite algunas más como margin, padding, border, box-shadow y float.
Como en cualquier otra regla, podemos combinar ambas cosas y, en ese caso, hay que saber que quien mande será ::first-letter, sin importar el orden en que lo hayamos escrito.
Otros dos pseudo-elementos son ::after y ::before que merecen una explicación más detallada y ... debería decir que no hay más porque, aunque hay otros, ninguno de ellos está estandarizado y han sufrido las idas y vueltas de quienes definen las reglas oficiales del CSS3; sin embargo, algunos de ellos pueden ser utilizados sin mayores inconvenientes siempre y cuando se utilicen los prefijos correspondientes para cada navegador.
El pseudo-elemento ::selection nos permite establecer propiedades personales cuando seleccionamos algún texto aunque sólo admite algunas propiedades como background-color, color, cursor, outline, text-decoration, text-emphasis-color y text-shadow.
.demo::selection {
background-color: darkred;
color: yellow;
}
El pseudo-elemento ::placeholder nos permite establecer algunas de las características gráficas del atributo placeholder. Lamentablemente, por ahora, las diferencias entre los navegadores también son varias y no todos admiten personalizar las mismas propiedades; además, se debe tener en cuenta que estas reglas de estilo hay que aplicarlas de modo individual y no pueden ser agrupadas:
.demo input::-moz-placeholder {
background-color: lightskyblue;
color: darkblue;
font-style: italic;
letter-spacing: .2em;
}
.demo input::-webkit-input-placeholder {
background-color: lightskyblue;
color: darkblue;
font-style: italic;
letter-spacing: .2em;
}
.demo input::-ms-input-placeholder {
background-color: lightskyblue;
color: darkblue;
font-style: italic;
letter-spacing: .2em;
}
Para confundir un poco más las cosas, hay una psudo-clase llamada :placeholder-shown es experimental pero funciona en Firefox y Chrome y hace exactamente lo mismo aunque está limitada a las etiquetas input de tipo text.
El pseudo-elemento ::backdrop se puede usar para establecer el fondo cuando un elemento se muestra en modo pantalla completa pero por ahora no es aconsejable utilizarlo.
Hay muchos más pseudo-elementos que aún están en modo experimental pero que ningún navegador acepta y muchos otros propuestos por las distintas empresas pero vaya uno a saber cuales quedarán y cuales pasarán al olvido.
