Los selectores de CSS, las pseudo-clases y todos los elementos HTML no son suficientes para poder aplicar estilos a algunos elementos especiales. Si se desea por ejemplo cambiar el estilo de la primera línea de texto de un elemento, no es posible hacerlo con las utilidades anteriores.
La primera línea del texto normalmente es variable porque el usuario puede aumentar y disminuir la ventana del navegador, puede disponer de más o menos resolución en su monitor y también puede aumentar o disminuir el tamaño de letra del texto.
La única forma de poder seleccionar estos elementos especiales es mediante los pseudo-elementos definidos por CSS para este propósito.
3.5.1. El pseudo-elemento :first-line
El pseudo-elemento :first-line permite seleccionar la primera línea de texto de un elemento. Así, la siguiente regla CSS muestra en mayúsculas la primera línea de cada párrafo:
p:first-line { text-transform: uppercase; }Este pseudo-elemento sólo se puede utilizar con los elementos de bloque y las celdas de datos de las tablas.
Se pueden combinar varios pseudo-elementos de tipo :first-line para crear efectos avanzados:
div:first-line { color: red; }
p:first-line { text-transform: uppercase; }
<div>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>En el ejemplo anterior, la primera línea del primer párrafo también es la primera línea del elemento <div>, por lo que se le aplican las dos reglas CSS y su texto se ve en mayúsculas y de color rojo.
3.5.2. El pseudo-elemento :first-letter
El pseudo-elemento :first-letter permite seleccionar la primera letra de la primera línea de texto de un elemento. De esta forma, la siguiente regla CSS muestra en mayúsculas la primera letra del texto de cada párrafo:
p:first-letter { text-transform: uppercase; }Los signos de puntuación y los caracteres como las comillas que se encuentran antes y después de la primera letra también se ven afectados por este pseudo-elemento.
Este pseudo-elemento sólo se puede utilizar con los elementos de bloque y las celdas de datos de las tablas.
3.5.3. Los pseudo-elementos :before y :after
Los pseudo-elementos :before y :after se utilizan en combinación con la propiedad content de CSS para añadir contenidos antes o después del contenido original de un elemento.
Las siguientes reglas CSS añaden el texto Capítulo - delante de cada título de sección <h1> y el carácter . detrás de cada párrafo de la página:
h1:before { content: "Capítulo - "; }
p:after { content: "."; }El contenido insertado mediante los pseudo-elementos :before y :after se tiene en cuenta en los otros pseudo-elementos :first-line y :first-letter.