Texto CSS - decoración subrayado color [duplicar]

Posible Duplicado:
Cambiar el color del subrayado

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

Author: Community, 2012-10-09
Source

4 answers

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

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

a:link {
  color: red;
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:hover {
 border-bottom-color: green;
}
 108
Author: Rob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-01 01:55:29

Puedes hacerlo si envuelves tu texto en un espacio como: 

a {
  color: #258;
  text-decoration: underline;
}
span {
  color: #d43;
  text-decoration: none;
}
<a href="#">
  <span>Text</span>
</a>
 113
Author: Cherusker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-17 04:01:33

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>
 15
Author: Luis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-17 03:59:52

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 geniales de esta manera: 

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

Espero que ayude.

 5
Author: codenighter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-09 16:48:23