css - visita - Cambiando<a> enlace subrayado de color

quitar el subrayado de los enlaces en html/css

Question

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

Tengo mi enlace como el siguiente texto y quiero cambiar el color de subrayado.

Este enlace contiene en muchas líneas, lo que necesita cambiar el color de subrayado para que sea más claro que el existente.

Usar el borde inferior no es la forma de resolver esto, ya que hay varias líneas.

¿Hay algún truco para resolver esto?

EDITAR

@Paolo Bergantino: Funciona con IE8, ¿es posible hackear con IE6,7?

Answer 1

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

Answer 2

En caso de que alguien esté interesado, esto funcionó para mí, propiedad CSS de text-decoration-color:

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

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

Answer 3

La respuesta de Paolo Bergantino no me funcionó en Chrome en OSX (v19.0.1084.56). Sin embargo, mover el espacio dentro de la etiqueta parece hacer 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;           
}

Puede verlo aquí: http://jsfiddle.net/itsmappleby/f4mak/

Answer 4

Lo siento por haber respondido a una pregunta anterior, pero tenía el mismo problema y no encontré una respuesta satisfactoria, por lo que se me ocurrió una solución diferente y pensé que la compartiría con usted.

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

este ejemplo tiene texto que cambia de color, y el subrayado se mantiene igual. Puedes hacerlo fácilmente de otra manera.

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 5

O puedes usar el borde. 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 ejemplo: http://jsfiddle.net/skanY/1/embedded/result/

Answer 6

Sé que esta es una vieja pregunta, pero pensé que agregaría esto ...

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;
}

Nota: la compatibilidad con navegadores anteriores no es completamente compatible

Answer 7

Si lo que quiere decir es un color de subrayado diferente del texto, lo único que puedo pensar es agregar un espacio alrededor del enlace:

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

Y luego el CSS:

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

Y obtienes lo que quieres .

EDITAR :

Probando esto un poco más, no me funciona en IE. Sin embargo, si agrega el borde inferior, funciona sorprendentemente en todos los navegadores, excepto que IE no coloca un borde debajo del último. Intentaré profundizar un poco más para ver si hay una forma de hacerlo en varios navegadores ...

Answer 8

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

Answer 9

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

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

editar: puedes usar el script java para dibujar una línea debajo del texto

Answer 10

el subrayado en los enlaces se realiza utilizando el estilo css de decoración de texto, creo que es del mismo color que el texto.

Si configura el texto de decoración en ninguno y luego agrega un borde inferior, puede cambiar el color con el estilo de borde de color.