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 .

Artículos Relacionados

• Mejora la accesibilidad de elementos ocultos con Jquery/CSS
• Limpiar desperfectos de CSS y JavaScript por demora de carga
• Cómo crear tu propio feed RSS manualmente

css

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario