para - La decoración de texto CSS resalta el color

etiquetas css

Question

Posible duplicado:
Cambio de color de subrayado

¿Es posible cambiar solo el color de línea que está debajo del texto? Me gustaría ver algo así como letras rojas con una línea azul debajo, pero no puedo encontrar la manera de hacerlo.

Answer 1

(para compañeros de Google, copiado de una pregunta duplicada ) Esta respuesta no está actualizada ya que text-decoration-color ahora es compatible con la mayoría de los navegadores modernos.

Lo más probable es que necesite esto, configurando su palabra con un borde inferior.

a:link {
  color: red;
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:hover {
 border-bottom-color: green;
}

Answer 2

No puede cambiar el color de la línea (no puede especificar diferentes colores de primer plano para el mismo elemento, y el texto y su decoración forman un solo elemento). Sin embargo, hay algunos trucos:

a:link, a:visited {text-decoration: none; color: red; border-bottom: 1px solid #006699; }
a:hover, a:active {text-decoration: none; color: red; border-bottom: 1px solid #1177FF; }

También puedes hacer algunos efectos interesantes de esta manera:

a:link {text-decoration: none; color: red; border-bottom: 1px dashed #006699; }

Espero eso ayude.

Answer 3

Por lo que sé, no es posible ... pero puedes probar algo como esto:

.underline 
{
    color: blue;
    border-bottom: 1px solid red;
}

<div>
    <span class="underline">hello world</span>
</div>

Answer 4

Puedes hacerlo si envuelves tu texto en un lapso como:

a {
  color: #258;
  text-decoration: underline;
}
span {
  color: #d43;
  text-decoration: none;
}

<a href="#">
  <span>Text</span>
</a>