El pseudo-elemento 'first-line' se utiliza para aplicar estilos especiales a la primera línea de un elemento una vez que se ha dado formato a éste en el lienzo:
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>La primera línea de un artículo del Newsweek.</P>
En un AU de modo texto, esto podría formatearse del siguiente modo:
LA PRIMERA LÍNEA DE UN artículo del Newsweek.
La secuencia ficticia de etiquetas de este ejemplo es la siguiente:
<P> <P:first-line> La primera línea de un </P:first-line> artículo del Newsweek. </P>
La etiqueta final de 'first-line' se inserta al final de la primera línea que resulta al formatear en el lienzo.
El pseudo-elemento 'first-line' sólo puede asociarse a elementos en bloque.
El pseudo-elemento 'first-line' es similar a un elemento en línea, pero con ciertas restricciones. Solamente las siguientes propiedades se aplican al elemento 'first-line': propiedades de fuente (5.2), propiedades de color y fondo (5.3), 'word-spacing' (5.4.1), 'letter-spacing' (5.4.2), 'text-decoration' (5.4.3), 'vertical-align' (5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), 'clear' (5.5.26).
El pseudo-elemento 'first-letter' se utiliza para letras capitales, que es un efecto tipográfico muy común. Es similar a un elemento en línea si su propiedad 'float' es 'none', de otro modo es similar a un elemento flotante. Estas son las propiedades que se aplican a un pseudo-elemento 'first-letter': propiedades de fuente (5.2), propiedades de color y fondo (5.3), 'text-decoration' (5.4.3), 'vertical-align' (sólo si 'float' es 'none', 5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), propiedades de margen (5.5.1-5.5.5), propiedades de relleno (5.5.6-5.5.10), propiedades de borde (5.5.11-5.5.22), 'float' (5.5.25), 'clear' (5.5.26).
Así es como se consigue que una letra capital en texto se extienda a lo largo de dos líneas:
<HTML>
<HEAD>
<TITLE>Titulo</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>Las primeras</SPAN> palabras de un artículo de The Economist.</P>
</BODY>
</HTML>
Si un AU de modo texto soporta el pseudo-elemento 'first-letter' (lo más seguro es que no lo soporte) el código anterior podría formatearse del siguiente modo:
| AS PRIMERAS |__palabras de un artículo de The Economist.
La secuencia ficticia de etiquetas es la siguiente:
<P> <SPAN> <P:first-letter> L </P:first-letter>as primeras </SPAN> palabras de un artículo de The Economist. </P>
Obsérvese que las etiquetas del pseudo-elemento 'first-letter' están contiguas a su contenido (es decir, al carácter inicial), mientras que la etiqueta inicial del pseudo-elemento 'first-line' se inserta justo a continuación de la etiqueta inicial del elemento al cual se asocia.
El AU define qué caracteres están contenidos en el elemento 'first-letter'. Normalmente deben incluirse las comillas que precedan a la primera letra:
|| |\ /|ás vale | \/ |pájaro | |en mano | |que ciento volando", dice el refrán.
Cuando el párrafo comienza con otro signo de puntuación (p.ej. paréntesis o puntos suspensivos) u otros caracteres que normalmente no se consideren como letras (p.ej., dígitos y símbolos matemáticos), normalmente no se tiene en cuenta el pseudo-elemento 'first-letter'.
Algunos idiomas pueden tener reglas específicas sobre cómo tratar ciertas combinaciones de letras. En neerlandés, por ejemplo, si la combinación de letras "ij" aparece al comienzo de una palabra, deberían considerarse ambas contenidas en el pseudo-elemento 'first-letter'.
El pseudo-elemento 'first-letter' sólo puede ser asociado a elementos en bloque.
En un selector contextual, los pseudo-elementos sólo están permitidos al final del selector:
BODY P:first-letter { color: purple }
En los selectores los pseudo-elementos pueden combinarse con clases:
P.inicial:first-letter { color: red }
<P CLASS=inicial>Primer párrafo</A>
En este ejemplo la primera letra de todos los elementos 'P' con 'CLASS=inicial' aparecería en rojo. Cuando se combinan con clases o con pseudo-clases, los pseudo-elementos deben situarse al final del selector. Sólo puede especificarse un pseudo-elemento por selector.
Pueden combinarse varios pseudo-elementos:
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Un texto que ocupará dos líneas</P>
En este ejemplo, la primera letra de cada elemento 'P' sería verde y tendría un tamaño de 24pt. El resto de la línea (resultante del formateo en el lienzo) sería azul, mientras que el resto del párrafo sería rojo. Suponiendo que haya un salto de línea antes de la palabra "ocupará", la secuencia ficticia de etiquetas será:
<P> <P:first-line> <P:first-letter> U </P:first-letter>n texto que </P:first-line> ocupará dos líneas </P>
Obsérvese que el elemento 'first-letter' está dentro del elemento 'first-line'. Las propiedades establecidas en 'first-line' serán heredadas por 'first-letter', pero son anuladas si las mismas propiedades se establecen en 'first-letter'.
Si un pseudo-elemento rompe un elemento real, deben regenerarse en la secuencia ficticia las etiquetas adicionales necesarias. Por ejemplo, si un elemento 'SPAN' se extiende a través de una etiqueta </P:first-line> debe regenerarse un par de etiquetas SPAN final e inicial, y la secuencia ficticia de etiquetas se convierte en:
<P> <P:first-line> <SPAN> Este texto está dentro </SPAN> </P:first-line> <SPAN> de un elemento span largo </SPAN>