Foros del Web » Creando para Internet » CSS »

mostrar el href de un enlace por css

Estas en el tema de mostrar el href de un enlace por css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/01/2011, 05:03
 
Fecha de Ingreso: septiembre-2008
Mensajes: 7
Antigüedad: 9 años, 2 meses
Puntos: 0
mostrar el href de un enlace por css

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
  #2 (permalink)  
Antiguo 05/01/2011, 06:33
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: mostrar el href de un enlace por css

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:
Ver original
  1. <a href="http://www.google.com">Buscador de Google</a>
el css sería:

Código CSS:
Ver original
  1. a:after {
  2.     content: " - " attr(href);
  3.     font-family: monospace;
  4.     font-size: 11px;
  5.     font-style: normal;
  6.     text-decoration: none !important;
  7. }
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.
  #3 (permalink)  
Antiguo 05/01/2011, 07:03
 
Fecha de Ingreso: septiembre-2008
Mensajes: 7
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: mostrar el href de un enlace por css

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
  #4 (permalink)  
Antiguo 05/01/2011, 10:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: mostrar el href de un enlace por css

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
  #5 (permalink)  
Antiguo 06/01/2011, 00:47
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: mostrar el href de un enlace por css

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".

Cita:
Iniciado por kseso? Ver Mensaje
Pero recuerde que hay algún engendro que no le da soporte.
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com

Etiquetas: enlace, href
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 22:49.