Pseudo-clases y pseudo-elementos (2)

Además de pseudo-clases hay pseudo-elementos, su uso es similar, sirven para identificar con precisión determinadas cosas y crear efectos.

:first-line identifica la primera línea de un párrafo. Aquí, le decimos que esa primera línea estará en negrita y de color amarillo:

p.ejemplo:first-line {color: yellow; font-weight: bold;}

<p class="ejemplo"> ... el texto ... </p>

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.

Esto, funcionará, sin importar el ancho del párrafo, esa primera línea es la que muestra el navegador, sea la que sea. Sólo tiene una restricción, como se refiere a textos, las propiedades que podemos usar son las que los afectan y cualquier otra, será ignorada:

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.

:first-letter es similar pero, identifica la primera letra de un párrafo:

p.ejemplo:first-letter {color: yellow; font-family: Georgia; font-size: 30px;}

<p class="ejemplo"> ... el texto ... </p>

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.

Por supuesto, ambas cosas pueden combinarse:

p.ejemplo:first-line {color:orange;}
p.ejemplo:first-letter {color:yellow;font-family:Georgia;font-size:30px;}

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.

:before y :after pueden usarse para agregar cierto contenido a una etiqueta ¿qué contenido? textos, imágenes, sonidos:

div.ejemplo p:before {content: url(unaImagen);}

<div class="ejemplo"> ... un texto ... </div>

En este ejemplo, le agregaremos una imagen a un texto:

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.

Y en este otro:

div.ejemplo p:after {content:'Texto agregado con CSS';}

<div class="ejemplo"><img src="unaImagen" /></div>

Le agregaremos un texto a una imagen:

Lamentablemente, tanto :before como :after no están implementados en Internet Explorer.

REFERENCIAS:w3.org