mostrar el href de un enlace por css

[r_cano]

Hola a todos,

Tengo en mi web un listado de enlaces y necesito que al imprimir se vean las direcciones de los enlaces, es decir el contenido del href.

Mis enlaces deben mostrar texto, no la dirección,por tanto este enlace:
<a href="http://www.google.com">Buscador de Google</a>

Se verá así en mi web:
"Buscador de Google"

Pero al imprimir si necesito que se vea la dirección y quede algo así:
"Buscador de Google - http://www.google.es"

He investigado un poco y no he visto nada al respecto. Agradecería mucho si alguien sabe si es posible o no (por continuar con la búsqueda…) y si sabe cómo hacerlo ya estaría súper agradecidísisisisima.

Gracias por leerme

[kseso?]

Haga uso de :after o :before Todo depende de si quiere que aparezca antes o después del texto del enlace.

En su ejemplo:

Código HTML:

<a href="http://www.google.com">Buscador de Google</a>
 

el css sería:

Código CSS:

a:after {
    content: " - " attr(href);
    font-family: monospace;
    font-size: 11px;
    font-style: normal;
    text-decoration: none !important;
}
 

content: indica qué cadena de texto aparecerá. En este caso después del enlace aparece el atributo href precedido por espacio guión espacio ( - )
El resto de propiedades son sólo para diferenciar la ruta del enlace del resto.

Pero recuerde que hay algún engendro que no le da soporte.

[r_cano]

Muchisimas gracias por contestar y encima tan rápido.

Es justo lo que necesitaba, aunque ya veo que en ie7 no funciona... que raro!!

No quisiera abusar pero... ¿no sabrás de algun truquito para este navegador?

Gracias por todo

[kseso?]

No, no se de alternativas para los ie.
Quizás con alguna programación, pero teniendo en cuenta que debe ejecutarse sólo en la impresión.

Así, se me ocurre que pudiese "imprimir" en el html ese atributo (href) mediante php o js o ... y ocultarlo en el media="screen" (display: none) y en el media="print" visualizarlo.
Pero esta parte ya corresponde a otro lenguaje y por lo tanto a otro foro.

Un placer haber sido de ayuda. Suerte con las alternativas

[Null_]

No hay alternativa para IE con respecto al CSS.

Por un lado quieres que google lo vea de tal forma, por lo que no puedes meterte con el html. Por otro lado, no sé si sirva implementarlo con JS, porque no sé si el JS es ejecutado cuando se imprime.

Sólo se me ocurre el típico y feo botón de "versión para imprimir".

Iniciado por kseso?

Pero recuerde que hay algún engendro que no le da soporte.