En un documento normal no encontramos necesidad de mostrar las URLs de nuestros enlaces: El usuario simplemente pulsa sobre el mismo y automáticamente es dirigido a la página solicitada pero: ¿Qué sucede cuando imprimimos el documento?

Utilizar utilizar una hoja de estilos dedicada en exclusiva a dar formato al documento es cada vez una costumbre más frecuente. Para ello, recordemos, sólamente es crear una hoja css y enlazarla a nuestro documento utilizando el atributo media=”print”:

Mediante este método (el uso del atributo media=”print”) es sencillo aplicar un formato más amigable al documento a la hora de imprimirlo (ocultando menus, imágenes no deseadas…). Sin embargo, existe un pequeño problema: ¿Qué sucede con los enlaces?

En un documento impreso es imposible (por razones obvias) hacer click en un enlace para visitarlo: ¿Cómo podemos mostrar en la hoja impresa la URL del mismo? Una vez más, CSS tiene la respuesta.

Lamentablemente, IE6 no soporta el código que vamos a explicar pero, como mal menor, lo ignora sin provocar errores. En cambio, Mozilla Firefox la soporta sin problemas (y esperemos que IE7 haga lo mismo).

Los pseudoelementos
Hasta ahora casi todos conocíamos 4 pseudoclases: link, hover, active y visited. Son la herramienta perfecta para la famosa pregunta de cambiar los colores de los enlaces.

Pero aparte de las pseudoclases, CSS también posee pseudoelementos. Sin entrar en cuestiones teóricas (lo importante aquí es saber utilizarlos), simplemente comentaremos que los pseudoelementos nos permiten tener acceso al contenido del arbol de elementos del documento (por ejemplo, los atributos de una etiqueta) y las pseudoclases nos permiten acceder a aquellas partes que no son visibles directamente en el código (por ejemplo, el estado del ratón sobre un elemento del documento).

:before y :after
Dentro de los pseudoelementos encontramos a nuestros protagonistas, que nos permitirán generar contenido delante o detrás del elemento al que se apliquen. Su compañero más habitrual es el atributo ‘content’ y su uso es casi tan sencillo como el de las pseudoclases:

Si tenemos un documento como éste:


  

  
  

Hola Mundo

Podemos añadir texto por delante del mismo utilizando el pseudoelemento :before y el atributo content:


  


  
  

Hola Mundo

Lo que nos devuelve en pantalla:

el navegador dice: Hola mundo

Como se puede ver hasta ahora, su uso es realmente sencillo (lástima que IE6 no lo soporte).

Paginas: 1 2