Pseudoclases, pseudoelementos y la propiedad content de CSS

En este tip veremos cómo podemos aplicar estilos CSS de una manera más interactiva usando pseudo-clases y pseudo-elementos, que usaremos para aplicar propiedades específicas a los elementos con los que interactúa el usuario.

En los navegadores basados en el motor Gecko (como Mozilla y Opera), se puede usar la propiedad 'content' de CSS para añadir contenido (como veremos en el ejemplo, más adelante).

También en estos mismos navegadores, se puede usar el pseudo-elemento ':before' para seleccionar, como su nombre lo dice, un espacio antes a la etiqueta a la que se le pone ese pseudo-elemento.

Las pseudo-clases y pseudo-elementos no son nada mas que selectores, cada uno de ellos actúa según lo que el mismo diga. He aquí una lista de ellos:

Pseudo-elementos:

• :first-letter : Actúa en la primera letra del elemento.
  
• :first-line : Actúa en la primera linea del elemento.
  
• :before : Actúa antes del elemento.
  
• :after : Actúa después del elemento.
  

Pseudo-clases:

Las pseudo-clases deben serles mas conocidas, en ellas encontraremos cosas que tal vez ya hemos usado, como :hover ó :link. He aquí una lista de ellas:

• :first-child : Actúa en la primera etiqueta que se encuentre del elemento seleccionado
  
• :link : Actúa cuando el link no ha sido visitado.
  
• :hover : Actúa mientras el mouse esta sobre el elemento.
  
• :visited : Actúa cuando el link ha sido visitado.
  
• :focus : Actúa mientras el elemento esta seleccionado.
  
• :active : Actúa mientras el elemento esta activo.
  

La sintaxis para ambos es

Código :

elemento:pseudo-clase:pseudo-elemento {
   propiedad: valor
}

Ahora veamos la utilidad real de esto.
¿Queremos hacer una lista con un carácter personalizado?
No hay problema, buscamos nuestro carácter favorito, lo transformamos a HTML (Se puede obviar este paso, pero para asegurarnos de una correcta visualización los transformamos a HTML) y ponemos el siguiente código:

Código :

ul li:before {
   content: "/2A";
}

Daría como resultado una lista con unos lindos asteriscos.

¿Y si queremos usar imágenes?
No hay problema, codificamos nuestra imagen a base64 y colocamos algo como:

Código :

a:visited:after {
   content: "data:image/x-icon;base64,R0lGODlhEAAQAPfLAAATVikwdA8SnxUfgAsWpAAilholjxw4jBc7kwAlvQQ2sRMsoBUqqhMzuhY/vxw4tSgmiyM1mSUztiQ6sTE3sQ4qyxMxxRoyxiAuxR1CtBxJsBxasSJuuTFguBte0Rlf2xVc9h9W9xVjzxVr0gdj6BRh4R1o5yBcyiZbyydT1i9b2Ddb1iFY6CJg2Vpor1dzvEJu20Z0yi23QDy1REi2OUy0O1WzOVC4PU+tVUe5Sk2xQU2zRUO4UE21Ula2SmKEqWWF2HyPx2+a6X6e6Xqk1m+s78sUDs4UGdEQB9YfDdwaANEfHd0YEscjAM4mAM0qANIoD9IkGdslGswuItYgL4aP0ImP2YGZ36Opzaq2wq/S+rzX/7/e8MrS1MLO/sTb48rT8snX/83c89PZ+crq+cH1/9Dl/9Ln/93r/9fy/+Hf7P/42eDm/O7u/+T29uX2/eT2/+f4/+f5/+j/9u//8+3/9u7/9ur5/+j//+n//+v//u3//+7//e7//+////b66/T/6vX/6/f/7f/07fj/4fv/4Pj/5v/45v7/4/r+7/3/6fDw+Pfx//D/9/X/8fT/8/f/8ff/8/D///H///L8/fL///P///X7//b6/ff/+/T///b9//f///v19//w9v/09P/29v/x+f/y///z///1+v/1///2///3//j79P/58/z/8/z99/z/9v7/9P7/9vn7//v6//j9//n9//j///n///v//vv////4+v/5+//6+P/4///6/P/6/v/6///7///9+P/8+v/9+v7/+Pz////8/f/9/f79///8///9//7//////////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAMsALAAAAAAQABAAAAj/AEn4oIFjBw8bOnrMuJGjhowZM1T8UdYJUZ5ZcNRYWjSrVK5QU0DMmtUnzRAXEy4o6FCEy6NDTkQIq1MmRgM0eZTlCXMgQJtRSE4gmgUkwh1EiZTNUiamy6NUUExcuoJgDCdDjQg9KgVL2SNFT1hwEvKglLBWuixZ+jSrlSBdRlL04bBBkTBdpZTpIqWsFaBcTEr0QaEhl6dWlswKW6poDRUPlmAUQKWMkTJLc76QMQNGUZMWgIgkCFJnlq5WXigwkFClVZQQyuRgELAlk7JBymCZGYAF0ZEPrQixgUDAihxVdPpoAZAFUZIRfThxgvPCwAILDipk+OFG2ZIVoxApERtPfvwlvZ+kQFzPvv0MJQEBADs=";
}

Con esto, el logo de google ( ) se pondría despues de cada enlace ya visitado.

Asi, se puede ir jugando con los pseudo-elementos y pseudo-clases. Con ellos, por ejemplo, puedes hacer una letra capital, incluso puedes usar animaciones flash, sumando el uso de base64 a la mezcla .

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.