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.