Ahora que ya has aprendido lo más básico de CSS y que ya has profundizado con cinco cosas menos básicas que debes saber sobre CSS ya puedes dar el paso y empezar a jugar con los “pros” en esto del CSS.

1. Pseudo elementos

Los pseudo elementos son una de esas cosas menos conocidas de CSS, pero que a veces acaban siendo muy útiles. Existen cuatro de estos pseudo elementos:

1.1. Modificador de primera línea (:first-line)

Gracias al pseudo elemento :first-line podemos modificar la primera línea del texto contenido en un elemento de bloque. El siguiente ejemplo quizás lo aclare un poco más.

RESULTADO:

HTML:

<p id="firstLine">A este texto le aplicamos un estilo solo a la primera línea.
El resto de líneas se dibujaran de forma normal. Y ahora tengo que
rellenar con este texto para que podáis comprobar que efectivamente
funciona tal y como digo. Este tipo de selectores se usan muy poco, pero a veces vienen
muy bien, y mucha gente no los conoce.</p>

CSS:

p#firstLine:first-line
{
color: red;
font-size: large;
background-color: pink;
}

El único uso que he dado alguna vez a este elemento fué para destacar la primera línea de un texto que quería que llamara la atención.

1.2. Modificador de primera letra (:first-letter)

El pseudo elemento :first-letter permite dar un estilo diferente a la primera letra de un párrafo.

RESULTADO:

HTML:

<p id="firstLetter">Este párrafo tiene aplicado un estilo a su primera letra, unicamente. Esto
se usa muchas veces para crear efectos tipográficos similares a los que se usa en muchas publicaciones
impresas.</p>

CSS:

p#firstLetter:first-letter
{
color: blue;
font-size: xx-large;
font-weight: bold;
}

Este elemento se suele utilizar para crear efectos tipográficos habituales en las publicaciones impresas.

1.3. Modificadores :before y :after

Los modificadores :before y :after permiten añadir contenido desde el CSS al final o al principio de un elemento de bloque.

RESULTADO:

HTML:

<p id="beforeandafter">Estos dos selectores son practicamente desconocidos y realmente curiosos.
Permiten añadir cierto contenido (en este caso, el texto en rojo) justo al principio o al final
del que ya le des tú al elemento. Nunca los he llegado a usar en la práctica, pero nunca se sabe...</p>

CSS:

p#beforeandafter:before
{
content: "[PRINCIPIO] - ";
color: red; font-weight: bold;
}
p#beforeandafter:after
{
content: " - [FINAL]";
color: red; font-weight: bold;
}

Uno de los pocos usos que se me ocurren para estos pseudo elementos son los de añadir un icono al principio o al final de un texto, por ejemplo.

Leer el resto de esta entrada »