“Text-decoration” y el “: después de” pseudo-elemento, revisited

Question

Estoy re-pidiendo href="https://stackoverflow.com/questions/1180910/text-decoration-and-the-after-pseudo-element"> esta pregunta porque sus respuestas que no funcionó en mi caso.

En mi hoja de estilo para los medios impresos Quiero añadir la URL después de cada vínculo utilizando el pseudo-clase :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. El color sin embargo está establecido correctamente en negro para la dirección URL. ¿Hay una manera de hacer el trabajo text-decoration?

El pregunta original imágenes de tamaño fijo adjuntas en lugar de anchura variable texto. Sus respuestas utilizar el relleno y las imágenes de fondo para evitar tener que utilizar la propiedad text-decoration. Todavía estoy buscando una solución cuando el contenido es texto de longitud variable.

Answer 1

aplicación de IE8 del: before y: after pseudo-elementos es incorrecta. Firefox, Chrome y Safari toda aplicarlo 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 Insertar    contenido generado antes o después de un    contenido del elemento . Se explican   en el apartado de texto generado.

     

...

     

Cascading Style Sheets Nivel 2 Revisión 1 (CSS 2.1) Especificación

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

Creo que las opciones se van a utilizar la técnica de imagen de fondo / de relleno se sugiere en su pregunta anterior o, posiblemente, envolviendo sus elementos de anclaje de elementos span y la aplicación de los pseudo-elementos a los elementos span lugar.

Answer 2

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

Probado en Chrome 25, Firefox 19

Answer 3

Yo tenía el mismo problema y mi solución era 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 4

Como alternativa, puede utilizar un borde inferior en lugar de un texto-decoración. 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 5

Lo único que trabajó para mí estaba declarando un selector repetida por separado con la misma propiedad text-decoration que se hereda de su padre, a continuación, en el selector general, el establecimiento de decoración de texto a ninguno.

IE aparentemente no sabe qué hacer cuando se establece text-decoration: none en un elemento seudo sin ese elemento que tiene la propiedad text-decoration declarado (que por defecto, no tiene nada declarada por defecto). Esto tiene mucho sentido, ya que, obviamente, se hereda de los padres, pero por desgracia, ahora tenemos los 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 6

Lo que hago es añadir un lapso en el interior del elemento, así:

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

A continuación, en el archivo CSS:

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

a {
  text-decoration:none;
}

a span {
  text-decoration: underline;
}

Answer 7

Me di cuenta que no responde a la pregunta que usted está pidiendo, pero hay una razón por la que no se puede utilizar el siguiente (enfoque basado en 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 aplicación de Firefox :after observa la propiedad de la clase del selector, no la clase pseudo. Podría valer la pena experimentar con diferentes doctypes, sin embargo? La transición, en vez de estricta, a veces permite diferentes resultados (aunque no siempre ).

Editar:

Parece que el uso

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

anulaciones, o al menos cueros, el text-decoration. Esto en realidad no proporciona ningún tipo de respuesta, pero al menos ofrece una solución de tipo.

Answer 8

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 las versiones al decir, cuando se utiliza el servicio post-antes-content-cosa para dosplaying comillas.

Answer 9

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 se ha probado en cualquier otro navegador, sin embargo, la mejor de las suertes!

Answer 10

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

Para conseguir alrededor de él, envolví la dirección URL en div y se utiliza algo como esto.

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

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

Answer 11

1)

:after{
    position: absolute;
}

No es perfecto, ya que el contenido de elementos no envolver

2)

:after{
    display: inline-block;
}

No es perfecto, porque a veces se quiere después del contenido siempre debe concluir con la última palabra del contenido del elemento.

Por ahora, no pude encontrar encontrar una solución perfecta ajusta a todas las condiciones 3 (1. Contenido podría envolver automática si se trata de contenido 2.after demasiado tiempo debe envolver con el contenido del elemento, lo que significa que después de contenido no debe ocupar solo por ella uno mismo. 3.text-decoración solamente debe aplicarse con la condición de elemento se aplica a después del contenido.) pensamientos que por ahora está utilizando otra manera de imitar text-decoration.