Solución:
Sí, agregando un elemento de envoltura adicional. Asigne el color de línea que desee a un elemento exterior, 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 (ver también W3.org). El enfoque recomendado es utilizar <del> si se pretende un verdadero significado de eliminación, o de lo contrario utilizar un <s> elemento o estilo con text-decoration CSS como en el primer ejemplo aquí.)
Para que el tachado aparezca para: hover, una hoja de estilo explícita (declarada o referenciada en <HEAD>) debe ser usado. (Los :hover La pseudoclase 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="https://foroayuda.es/#" class="redStrikeHover">
<span style="color:black">hover me</span>
</a>
</body>(IE7 parece requerir algunos href estar en el <a> antes de :hover tiene un efecto; Los navegadores basados en FF y WebKit no lo hacen).
A 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 de 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 usando el text-decoration-color propiedad. En particular:
los
text-decoration-colorLa propiedad CSS establece el color utilizado al dibujar subrayados, sobrelíneas o tachados especificados portext-decoration-line. Esta es la forma preferida de colorear estas decoraciones de texto, en lugar de usar combinaciones de otros elementos HTML.
Ver también text-decoration-color en el borrador de especificaciones de CSS 3.
Si desea usar este método de inmediato, probablemente tenga que prefijarlo, usando -moz-text-decoration-color. (También especifíquelo sin -moz-, para compatibilidad con versiones posteriores.)
He usado un vacio :after elemento y decorado un borde en él. Incluso puede usar transformaciones CSS para rotarlo en una línea inclinada. Resultado: CSS puro, sin elementos HTML adicionales. Desventaja: no se ajusta a varias líneas, aunque en mi opinión, no debería usar tachado en grandes bloques de texto de todos modos.
s,
strike {
text-decoration: none;
/*we're replacing the default line-through*/
position: relative;
display: inline-block;
/* keeps it from wrapping across multiple lines */
}
s:after,
strike:after {
content: "";
/* required property */
position: absolute;
bottom: 0;
left: 0;
border-top: 2px solid red;
height: 45%;
/* adjust as necessary, depending on line thickness */
/* or use calc() if you don't need to support IE8: */
height: calc(50% - 1px);
/* 1px = half the line thickness */
width: 100%;
transform: rotateZ(-4deg);
}<p>Here comes some <strike>strike-through</strike> text!</p>