Cambiando <a> subrayado de enlace color

Question

Me pregunto si hay algún truco para resolver este problema.

Tengo mi enlace como texto a continuación y quiero cambiar el color de subrayado.

Este enlace contiene en muchas líneas que debe cambiar el color de subrayado a ser más ligero que el fondo frontera existente

utilizando no es la manera de resolver esto porque varias líneas.

¿Hay algún truco para solucionar esto?

EDITAR

@Paolo Bergantino: Funciona con Internet Explorer 8, es posible cortar con IE6,7?

Answer 1

Si lo que quiere decir es un color de subrayado diferente de lo que el texto es, lo único que puedo pensar es añadir un lapso de alrededor del enlace:

<span class='underline'> 
    <a href="#">this just<br>a test<br>of underline color</a> 
</span> 

Y entonces el CSS:

span.underline { 
    color: red; 
    text-decoration: underline; 
} 
span.underline a { 
    color: blue; 
    text-decoration: none; 
} 

Y you get what you want.

EDITAR:

Pruebas de esto un poco más, no está funcionando para mí en IE. Sin embargo, si agrega el borde inferior, sorprendentemente funciona en todos los navegadores, excepto que IE no pone un borde debajo del último. Intentaré profundizar un poco más para ver si hay una forma de navegador cruzado para hacer esto ...

Answer 2

el subrayado en los enlaces se realiza usando el estilo de texto text-css, creo que es del mismo color que el texto.

si establece la decoración de texto en ninguna y agrega un borde inferior, puede cambiar el color con el estilo de color de borde.

Answer 3

Subrayado, al ser un atributo de texto, hereda el color del texto. Así que dudo que haya una manera de cambiar explícitamente el color de subrayado sin cambiar también el color del texto.

Answer 4

El subrayado de los enlaces siempre tendrá el mismo color que el texto.

Answer 5

También puede usar este código para hacer subrayados con colores diferentes. Utilice las fronteras

h1{ 
    border-bottom: 1px solid #AAAAAA 
} 

edición: puede usar java script para trazar una línea sobre el texto

Answer 6

pena por ressing una vieja pregunta, pero yo estaba teniendo el mismo problema, y ​​no encontrar una respuesta satisfactoria, así que se me ocurrió una solución diferente y pensé en compartirla contigo.

incluye una imagen de fondo de 1x1 (o el tamaño que prefiera), pero es limpia y simple, y 100% compatible con el navegador (probado desde IE6 y superior).

este ejemplo tiene texto que cambia de color y el subrayado permanece igual. usted puede simplemente hacerlo de otra manera. No parecía la respuesta de

a, a:link, a:active, a:visited{ 
    text-decoration:none; 
    color:#888; 
    background:transparent url('underline.png'); 
    background-position:0 10px; 
    background-repeat:repeat-x; 
} 

a:hover{ 
    color:#009ee0; 
} 

Answer 7

Paolo Bergantino a trabajar para mí en Chrome en OSX (v19.0.1084.56). Sin embargo, mover el lapso dentro de la etiqueta a parecía ser el truco.

El HTML

<a class="underline" href="#"> 
    <span>Hello world<br />this is a test<br />of changing the underline colour</span> 
</a>​ 

Y el CSS

.underline{ 
    color: red;   
} 

.underline span{ 
    color: gray;   
} 

También se puede ver aquí: http://jsfiddle.net/itsmappleby/f4mak/

Answer 8

O puede utilizar frontera. Este método funciona en ie6.

HTML

<a href="#" class='underline'> 
    <span>this just</span><br/> 
    <span>a test</span><br/> 
    <span>of underline color</span> 
</a> 

CSS

a.underline { 
    text-decoration: none; 
    } 
    a.underline span { 
    display: inline-block; 
    border-bottom: 1px solid red; 
    font-size: 15px; 
    line-height: 12px; 
    } 

y el ejemplo: http://jsfiddle.net/skanY/1/embedded/result/

Answer 9

Sé que esto es una vieja pregunta, pero pensé que me gustaría añadir esta ...

a:active, a:link, a:visited{ 
    background-image: linear-gradient(rgba(255,255,255,0)50%, #ff5400 50%); 
    text-decoration: none; 
    background-size: 2px 2px; 
    background-position: 0 1.2em; 
    background-repeat: repeat-x; 
} 

N ota: Mayor apoyo navegador no es compatible por completo

Answer 10

En caso de que a alguien le interesa - esto funcionó para mí - text-decoration color propiedad CSS:

.example { 
    text-decoration: underline; 
    text-decoration-color: red; 
} 

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color