text-decoration-color

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Resumen

La propiedad text-decoration-color establece el color usado cuando se dibujan subrayados o líneas a través del texto, especificadas por la propiedad text-decoration-line. El color especificado será el mismo para los tres tipos de línea.

CSS no provee un mecanismo directo para especificar un color único para cada tipo de línea. Sin embargo, se puede obtener un efecto similar anidando elementos HTML, aplicando diferente tipo de línea para cada uno (via la propiedad text-decoration-line), y especificando un color de línea (usando text-decoration-color) propio para cada elemento.

Valor inicialcurrentColor
Applies toall elements. It also applies to ::first-letter and ::first-line.
Heredableno
Mediavisual
Valor calculadoIf the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
Animatableyes, as a color
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

/* valores <color> */
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

/* Valores globales */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;

Valores

<color>
La propiedad color acepta varlos nombres clave y notaciones numéricas. Vea <color> para más detalles.

Sintaxis formal

<color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Ejemplos

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

El ejemplo anterior tiene el mismo efecto que el código siguiente, que además añade un estilo para cuando el elemento tiene el puntero del mouse encima.

<!DOCTYPE html>
<html>
<head>
<style>
.example {
  font-size: 24px;
  text-decoration: underline;
  color: red;
}
.example:hover {
  color: blue;
  text-decoration: line-through;
}
</style>
</head>
<body>
<span class="example">
  <span style="color:black;">texto negro con subrayado rojo, y azul con el cursor encima</span>
</span>
</body>
</html>

Especificaciones

Especificación Estado Comentarios
CSS Text Decoration Level 3
The definition of 'text-decoration-color' in that specification.
Candidate Recommendation Definición inicial. La propiedad text-decoration no era una forma reducida anteriormente

Compatibilidad de navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico No support 6.0 (6.0) - 39.0 (39.0)-moz
36.0 (36.0) without prefix
No support No support 7.1 -webkit
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico No support 6.0 (6.0) - 39.0 (39.0)-moz
36.0 (36.0) without prefix
No support No support 8 -webkit

Etiquetas y colaboradores del documento

 Colaboradores en esta página: israel-munoz
 Última actualización por: israel-munoz,