¿CSS tachado de diferente color al del texto?
Los elementos HTML del, strikeo spueden usarse todos para un efecto de tachado de texto. Ejemplos:
<del>del</del>
....da:del
<strike>strike</strike> and <s>strike</s>
....da: huelga y huelga
text-decorationLa propiedad CSS con un valor line-throughse puede utilizar de manera similar. El código...
<span style='text-decoration:line-through'>
text-decoration:line-through
</span>
...también se renderizará para verse así: decoración de texto: paso de línea
Sin embargo, la línea tachada suele ser del mismo color que el texto.
¿Se puede utilizar CSS para hacer que la línea tenga un color diferente?
Sí, añadiendo un elemento envolvente extra. Asigne el color de línea deseado a un elemento exterior y luego el color de texto deseado al elemento interior. Por ejemplo:
<span style='color:red;text-decoration:line-through'>
<span style='color:black'>black with red strikethrough</span>
</span>...o...
<strike style='color:red'>
<span style='color:black'>black with red strikethrough<span>
</strike>(Tenga en cuenta, sin embargo, que <strike>se considera obsoleto en HTML4 y obsoleto en HTML5 ( consulte también W3.org ). El enfoque recomendado es utilizarlo <del>si se pretende un verdadero significado de eliminación, o en caso contrario utilizar un <s>elemento o estilo con text-decorationCSS como en el primer ejemplo aquí.)
Para que el tachado aparezca al pasar el mouse, <HEAD>se debe utilizar una hoja de estilo explícita (declarada o referenciada en ). (La :hoverpseudoclase no se puede aplicar con atributos STYLE en línea). Por ejemplo:
<head>
<style>
a.redStrikeHover:hover {
color:red;
text-decoration:line-through;
}
</style>
</head>
<body>
<a href='#' class='redStrikeHover'>
<span style='color:black'>hover me</span>
</a>
</body>hrefque se configure algo <a>antes de :hoverque tenga efecto; los navegadores basados en FF y WebKit no).
A partir de febrero de 2016 , CSS 3 tiene el soporte que se menciona a continuación. Aquí hay un fragmento de la página de un solo producto de WooCommerce con descuento en el precio.
/*Price before discount on single product page*/
body.single-product .price del .amount {
color: hsl(0, 90%, 65%);
font-size: 15px;
text-decoration: line-through;
/*noinspection CssOverwrittenProperties*/
text-decoration: white double line-through; /* Ignored in CSS1/CSS2 UAs */
}
Resultando en:
Es probable que CSS 3 tenga soporte directo para usar la text-decoration-colorpropiedad . En particular:
La
text-decoration-colorpropiedad CSS establece el color utilizado al dibujar subrayados, sobrerayados o tachados especificados portext-decoration-line. Esta es la forma preferida de colorear estas decoraciones de texto, en lugar de utilizar combinaciones de otros elementos HTML.
Consulte también text-decoration-colorel borrador de especificación de CSS 3 .
Si desea utilizar este método inmediatamente, probablemente deba anteponerlo usando -moz-text-decoration-color. (También especifíquelo sin -moz-, para compatibilidad futura).
