“Text-decoration” y el pseudo-elemento “: after”, revisitado

Estoy volviendo a hacer esta pregunta porque sus respuestas no funcionaron en mi caso.

En mi hoja de estilo para medios impresos, deseo adjuntar la url después de cada enlace usando la pseudoclase :after .

 a:after { content: " "; text-decoration: none; color: #000000; } 

En Firefox (y probablemente Chrome pero no en IE8), text-decoration: none se ignora, y el subrayado se extiende de forma poco atractiva en la parte inferior de la url. Sin embargo, el color está correctamente configurado en negro para la url. ¿Hay alguna manera de hacer que la text-decoration funcione?

La pregunta original adjuntaba imágenes de tamaño fijo en lugar de texto de ancho variable. Sus respuestas usan relleno e imágenes de fondo para evitar tener que usar la propiedad de decoración de texto. Todavía estoy buscando una solución cuando el contenido es de texto de ancho variable.

La implementación de IE8 de los pseudo-elementos: before y: after es incorrecta. Firefox, Chrome y Safari lo implementan de acuerdo con la especificación CSS 2.1.

5.12.3 Los pseudo-elementos: antes y después

Los pseudo-elementos ‘: before’ y ‘: after’ se pueden usar para insertar contenido generado antes o después del contenido de un elemento . Se explican en la sección sobre texto generado.

Hojas de estilo en cascada Nivel 2 Revisión 1 (CSS 2.1) Especificación

La especificación indica que el contenido debe insertarse antes o después del contenido del elemento , no del elemento (es decir, contenido: antes del contenido: después de ). Por lo tanto, en Firefox y Chrome, la decoración de texto que está encontrando no está en el contenido insertado sino en el elemento de anclaje principal que contiene el contenido insertado.

Creo que sus opciones van a estar usando la técnica de imagen de fondo / relleno sugerida en su pregunta anterior o posiblemente envolviendo sus elementos de anclaje en elementos de tramo y aplicando los pseudoelementos a los elementos de tramo en su lugar.

Si utiliza display: inline-block en :after pseudo, la statement de text-decoration funcionará.

Probado en Chrome 25, Firefox 19

Tuve el mismo problema y mi solución fue establecer la altura y el desbordamiento: oculto

http://jsfiddle.net/r45L7/

 a { text-decoration: underline; } a:after { content: "»"; display: inline-block; text-decoration: none; height:16px; overflow: hidden; padding-left: 10px; } 

Funciona en IE, FF, Chrome.

Como alternativa, puede usar un borde inferior en lugar de una decoración de texto. Esto supone que sabes el color del fondo

 a { text-decoration: none; border-bottom: 1px solid blue; } a:after { content: "foo"; border-bottom: 1px solid white; /* same color as the background */ } 

Me doy cuenta de que esto no responde la pregunta que me estás preguntando, pero ¿hay alguna razón por la que no puedas usar lo siguiente (enfoque basado en el background ):

 a.file_pdf { background-image: url(images/pdf.png); background-position: center right; background-repeat: no-repeat; padding-right: 15px; /* or whatever size your .png image is plus a small margin */ } 

Por lo que yo sé, la implementación de Firefox :after observar la propiedad de la clase del selector, no la clase psuedo. Sin embargo, ¿valdría la pena experimentar con diferentes tipos de documentos? La transición, en lugar de estricta, a veces permite resultados diferentes (aunque no siempre mejores resultados …).

Editar:

Parece que usar

 a:after { content: " <" attr(href) ">"; text-decoration: none; color: #000000; background-color: #fff; /* or whatever colour you prefer */ } 

anula, o al menos oculta, la text-decoration del text-decoration . Esto realmente no proporciona ningún tipo de respuesta, pero al menos ofrece una solución alternativa.

Lo único que funcionó para mí fue declarar un selector repetido por separado con la misma propiedad de decoración de texto que estaba heredando de su elemento primario, luego en el selector principal, establecer texto-decoración en ninguno.

Al parecer, IE no sabe qué hacer cuando configura text-decoration: none en un pseudo elemento sin ese elemento que tiene la propiedad de decoración de texto declarada (que por defecto, no tiene nada declarado por defecto). Esto tiene poco sentido porque obviamente se hereda de los padres, pero, por desgracia, ahora tenemos navegadores modernos.

 span.my-text { color: black; font-size: 12px; text-decoration: underline; } span.my-text:after { text-decoration: underline; // Have to set text-decoration here so IE knows it can be overwritten below } span.my-text:after { color: red; text-decoration: none; // In the same repeated selector, we can now overwrite text-decoration in our pseudo element. } 

Lo que hago es agregar un lapso dentro del elemento a, como este:

 link text 

Luego en tu archivo CSS:

 a::after{ content:" <" attr(href) "> "; color: #000000; } a { text-decoration:none; } a span { text-decoration: underline; } 

Puede autoseleccionar enlaces a archivos pdf por:

 a[href$=".pdf"]:after { content: ... } 

IE menos de 8 se puede habilitar para que funcione correctamente implementando este enlace en el encabezado del archivo html:

  

También funciona muy bien en todas las versiones de IE cuando utiliza el contenido anterior al contenido para comillas dobles.

Coloque el contenido absolutamente de la siguiente manera:

 a { position: relative; margin: 0 .5em; font-weight: bold; color: #c00; } a:before, a:after { position: absolute; color: #000; } a:before { content: '<'; left: -.5em; } a:after { content: '>'; right: -.5em; } 

Esto funciona para mí en Firefox 3.6, no probado en ningún otro navegador, ¡mucha suerte!

Hola, yo también estaba teniendo problemas con esto y tropecé con una solución alternativa.

Para evitarlo, envolví la URL en div y usé algo como esto.

 .next_page:before { content: '('; } .next_page:after { content: ')'; }