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