"text-decoration" y el pseudo-elemento ": after", revisitado

Question

Estoy volviendo a preguntar this question porque sus respuestas no funcionaron en mi caso.

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

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

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

original question adjuntaron 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.

Answer 1

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 El: antes y: después de pseudo-elementos

El ': antes' y ': después de' pseudo-elementos pueden ser utilizados para inserto contenido generado antes o después de contenido del elemento. Se explican en la sección de texto generado.

...

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

La especificación indica que el contenido se debe insertar antes o después de el contenido del elemento, no el elemento (es decir,<elemento> contenido: antes contenido contenido: después de </elemento >). 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 utilizar la técnica background-image/padding sugerida en su pregunta anterior o posiblemente envolver sus elementos de anclaje en elementos span y aplicar los pseudoelementos a los elementos span en su lugar.

Answer 2

Sé que esto no responde a la pregunta que usted está pidiendo, pero hay una razón por la que no se puede utilizar el siguiente (background enfoque basado):

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 de :after observa 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 mejor resultados ...).

Editar:

Parece que el uso de

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

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

Answer 3

Puede autoselect enlaces a archivos pdf de:

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

decir, menos de 8 se puede activar para que funcione correctamente mediante la implementación de este eslabón de la cabeza del archivo html:

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]--> 

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

Answer 4

Posición absolutamente el contenido 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 cualquier otro navegador, sin embargo, la mejor de las suertes!

Answer 5

Como alternativa, puede usar un borde inferior en lugar de una decoración de texto. Esto supone que se conoce 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 */ 
} 

Answer 6

Hola yo también estaba teniendo problemas con esto también y pasó a tropezar a través de una solución.

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

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

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

Answer 7

Si utiliza display: inline-block en la seudo :after, la declaración text-decoration funcionará.

Probado en Chrome 25, Firefox 19

Answer 8

que tenían el mismo problema y mi solución fue establecer la altura y overflow: hidden

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.

Answer 9

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 principal, luego en el selector principal, establecer texto-decoración en ninguno.

Parece que IE no sabe qué hacer cuando establece 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. 
} 

Answer 10

Lo que hago es agrego un lapso en el interior del elemento, así:

<a href="http://foo.bar"><span>link text</span></a> 

Luego, en su archivo CSS:

a::after{ 
    content:" <" attr(href) "> "; 
    color: #000000; 
} 

a { 
    text-decoration:none; 
} 

a span { 
    text-decoration: underline; 
}