Ejemplo práctico
Una vez visto el ejemplo básico, vamos a aprovecharlo para nuestro objetivo. Si utilizáis Mozilla Firefox y seleccionáis el menú ‘Archivo->Previsualizar impresión’ veréis que las urls de este documento aparecen junto al texto del enlace original. Es una forma elegante de que el usuario guarde en su copia impresa la url a la que apunta el enlace.

Para ello utilizamos el pseudoelemento :after y un valor especial para el atributo content: attr(atributo).

attr(atributo) acepta como valor para atributo cualquiera de los que contiene el elemento al que le aplicamos el pseudo elemento. Un poco complicado de explicar, pero se verá más claramente con este ejemplo:

Tenemos este HTML:


  

  
  
    este enlace a apunta a:

Utilizando el pseudo elemento :after, podemos escribir:



  


  
  
    este enlace a apunta a:

El ejemplo anterior nos devuelve:
este enlace apunta a:http://www.dwug.es

Por lo tanto, ya hemos conseguido que el enlace aparezca junto a su url.

¿Podemos extender su uso? Por supuesto. El pseudoelemento se comporta como una regla CSS normal y acepta muchos de los atributos habituales. Y el atributo content, por su parte, permite unir texto simplemente concatenando texto estático entre comillas y el dinámico (como attr) fuera de ellas.

Nuestro ultimo ejemplo con código completo: Al igual que en nuestro sitio, el enlace aparecerá en cursiva y envuelto en paréntisis (para mejorar sus apariencia) cuando lo vayamos a imprimir (gracias a media=”print”). Nótese también como concatenamos el texto utilizando las comillas:


  


  
  
    Este ejemplo procede de la la web de DWUG

Cuando vemos el documento en el navegador, leeremos:
Este ejemplo procede de la la web de DWUG

Sin embargo, al abrir la previsualización de impresión (repito, no lo intentes con IE6), veremos:
Este ejemplo procede de la la web de DWUG (URL: http://www.dwug.es)

Como podeis ver, una forma sencilla de hacer nuestros documentos impresos más accesibles.

Paginas: 1 2