CSS para impresión: Un truco para mostrar los enlaces

Autor: Armonth | El domingo 25 de junio del 2006 @ 14:17.

Al hacer diseños en (x)HTML/CSS a menudo nos olvidamos de que los CSS también se pueden enfocar a otros media aparte del monitor de nuestro PC. Aunque podemos hacer plantillas para otros dispositivos o para impresión, hoy me voy a centrar en un pequeño truco que soluciona una de las mayores desventajas de imprimir páginas web.

Me refiero a que al imprimir una página web esta nos saldrá con el texto que enlaza a los sitios pero no el enlace al que apunta texto... y dado que no podemos hacer "click" en una hoja de papel es un poco putada. Dicho truco es simplemente usar la propiedad :after: con un poco de maña:

a[href]:after {
   content: " (Enlace " attr(href) ")";
   display: block;
   color: blue;
   text-decoration: none;
}

Esto hará que un texto enlazado al imprimirse muestre justo al lado un "(Enlace http://enlace-del-texto)" en azul. Recuerda que todo este código se puede encapsular dentro de un media para que se aplique solamente a la versión impresa:

@media print {
  codigo arriba mostrado
}

Comentarios