¡CSS en acción!
Seleccione otra hoja de estilo para navegar:
Actual: default.css

 

 Ver datos Ver explicación

 

2.4 Pseudo-elementos
Anterior   Siguiente
|  Introducción  |  :first-line  |  :first-letter  |  :before y :after  |

Introducción

En la impresión sobre papel, a menudo se estila que la primer letra o la primer línea de un párrafo (o ambas cosas a la vez) tenga un formato diferenciado. Los pseudo-elementos :first-letter y :first-line permiten conseguir el mismo efecto al seleccionar la primer letra o línea de un elemento.

Por otro lado, :before y :after permiten insertar un contenido antes o después de un elemento. Son llamados pseudo-elementos porque en realidad no existen en el documento fuente (ninguna marca identifica la primer letra de un párrafo, por ejemplo) pero son muy útiles para seleccionar elementos importantes dentro de la composición.

 Volver 

:first-line

Este pseudo-elemento permite aplicar un estilo determinado a la primera línea de un párrafo.

P:first-line { text-transform: uppercase }

Con la regla anterior conseguiríamos que todas las letras de la primera línea de los párrafos fueran convertidas en mayúsculas. Por supuesto, la medida de esta primer línea será determinada por el tamaño de la fuente, el ancho de la ventana, etc.

 Probar 

Sólo las siguientes propiedades se aplican al pseudo-elemento :first-line: propiedades de la fuente, propiedades del color, propiedades del fondo, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' y 'clear'.

 Volver 

:first-letter

:first-letter nos permite seleccionar la primer letra de un párrafo, generalmente para utilizarla como capitular (en un tamaño mayor que el resto del párrafo).

P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; font-weight: bold }

Las reglas anteriores determinan que los párrafos tengan una capitular en negritas del doble de tamaño que la fuente del párrafo.

 Probar 

 Volver 

:before y :after

Con los pseudo-elementos :before (antes) y :after (después) se puede insertar un contenido antes o después de un elemento determinado y definir el estilo del contenido insertado. La propiedad 'content', junto con estos pseudo-elementos, especifican lo que se inserta.

Podemos lograr que antes de cada elemento <H3> aparezca el texto "Tema:" sin necesidad de tener que escribirlo en cada título. También podemos hacer que cada párrafo termine con un pequeño ícono o poner "Fin" al pie de cada página usando las siguientes reglas.

H3:before {content: "Tema: "}
P:after {content: url("icono.gif")}
BODY:after {content: "Fin"; display: block;}

En la última regla hemos especificado también "display: block" para que la palabra "Fin" comience en una nueva línea (como si fuese un nuevo párrafo).

 Probar 

 Volver