Pseudoelementos: Primera linea (:first-line) y primera letra

CSS define unos elementos especiales llamados "pseudo-elementos" que permiten aplicar estilos a ciertas partes de un texto. En concreto, permite definir estilos especiales a la primera frase de un texto y a la primera letra de un texto.

El pseudo-elemento :first-line permite aplicar estilos a la primera línea de un texto. Las palabras que forman la primera línea de un texto dependen del espacio reservado para mostrar el texto o del tamaño de la ventana del navegador, por lo que CSS calcula de forma automática las palabras que forman la primera línea de texto en cada momento.

La siguiente imagen muestra cómo aplica CSS los estilos indicados a la primera línea calculando para cada anchura las palabras que forman la primera línea:

El código asociado podría ser el siguiente:

p:first-line {
text-transform: uppercase;
}

De la misma forma, CSS permite aplicar estilos a la primera letra del texto mediante el pseudo-elemento :first-letter:

El código HTML y CSS se muestra a continuación:

#normal p:first-letter {
font-size: 2em;
}
#avanzado p:first-letter {
font-size: 2.5em;
font-weight: bold;
line-height: .9em;
float: left;
margin: .1em;
}
#avanzado p:first-line {
font-weight: bold;
}

<div id="normal">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum
dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Etiam pharetra blandit purus.</p>
</div>

<div id="avanzado">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum
dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Etiam pharetra blandit purus.</p>
</div>

REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO