html - tachar - CSS tachado a través de diferentes colores del texto?

text decoration line through

Question

Los elementos HTML del , strike , o s pueden usarse para un efecto de tachado de texto. Ejemplos:

<del>del</del>

....da: del

<strike>strike</strike> and <s>strike</s>

.... da: huelga y huelga

La propiedad de text-decoration CSS con una line-through valor se puede usar de manera similar. El código...

<span style=''text-decoration:line-through''>
text-decoration:line-through
</span>

... también se renderizará para parecerse a: text-decoration: line-through

Sin embargo, la línea de tachado suele ser del mismo color que el texto.

¿Se puede usar CSS para hacer la línea de un color diferente?

Answer 1

Agregando a @gojomo puedes usar :after pseudo element para el elemento adicional. La única advertencia es que tendrá que definir su texto innerText en un atributo de data-text ya que CSS tiene funciones de content limitado.

CSS

<style>
s {
color: red;
text-align: -1000em;
overflow: hidden;
}
s:after {
color: black;
content: attr(data-text);
}
</style>

HTML

<s data-text="Strikethrough">Strikethrough</s>

Answer 2

Aquí hay un ejemplo de implementación de jQuery, gracias a la respuesta de gojomo y la sugerencia de utype (+1 para ambos)

$(function(){
//===================================================================
// Special price strike-out text
// Usage:
// Normally: <span class=''price''>$59</span>
// On special: <span class=''price'' special=''$29''>$59</span>
//===================================================================
$(".price[special]").each(function() {
var originalPrice = $(this).text();
$(this).html(''<strike><span>'' + originalPrice +''</span></strike> '' + $(this).attr(''special''))
.removeAttr(''special'')
.addClass(''special'');
});
});

El CSS para eso podría ser

.price strike, .price.special { color: Red; }
.price strike span { color: Black; }

Answer 3

Aquí hay un enfoque que utiliza un degradado para falsificar la línea. Funciona con ataques multilínea y no necesita elementos DOM adicionales. Pero como es un gradiente de fondo, está detrás del texto ...

del, strike {
text-decoration: none;
line-height: 1.4;
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.63em, transparent), color-stop(0.63em, #ff0000), color-stop(0.7em, #ff0000), color-stop(0.7em, transparent), to(transparent));
background-image: -webkit-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
background-image: -o-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
background-image: linear-gradient(to bottom, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
-webkit-background-size: 1.4em 1.4em;
background-size: 1.4em 1.4em;
background-repeat: repeat;
}

Ver fiddle: http://jsfiddle.net/YSvaY/

Los gradientes de color y el tamaño del fondo dependen de la altura de la línea. (Utilicé LESS para el cálculo y Autoprefixer después ...)

Answer 4

Aqui tienes:

<style>body {color: #000;}</style>
<del>&nbsp;&nbsp;<span style="color:#999">facebook</span>&nbsp;&nbsp;</del>

Answer 5

Asignar el color de paso de línea deseado a un elemento padre también funciona para el elemento de texto eliminado ( <del> ) - suponiendo que el cliente hace <del> como un paso de línea.

http://jsfiddle.net/kpowz/vn9RC/

Answer 6

En mi experiencia el

<span style=''color:red;text-decoration:line-through''>
<span style=''color:black''>black with red strikethrough</span>
</span>

No es la mejor opción. Tuve un compañero de trabajo que usó este método sin probar el navegador cruzado, así que tuve que volver atrás y arreglarlo porque causó problemas en Firefox. Mi recomendación personal sería usar el: después del selector para crear un tachado. De esa manera, puede volver a IE8 si realmente lo desea, sin conflictos de estilo, así como sólido en todos los demás navegadores.

También crea menos marcas y aproximadamente la misma cantidad de estilo que, en mi opinión, es un gran problema.

Entonces, si alguien más se encuentra con problemas similares, espero que esto pueda ayudar:

.lineThrough {
position: relative;
&:after {
content: " ";
display: block;
width: 60px;
height: 1px;
background: red;
position: absolute;
top: 49%;
left: 50%;
margin-left: -30px;
}
}

obviamente, podrías usar transform: translate en lugar de márgenes, pero este ejemplo es para volver a IE8

Answer 7

He utilizado un vacío :after elemento y decorado un borde en él. Incluso puede utilizar transformaciones de CSS para rotarlo en una línea inclinada. Resultado: CSS puro, sin elementos HTML adicionales! Desventaja: no se ajusta a varias líneas, aunque IMO 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>

Answer 8

La respuesta de Blazemonger (arriba o abajo) necesita votarse, pero no tengo suficientes puntos.

Quería agregar una barra gris en algunos botones redondos de 20px de ancho para indicar "no disponible" y ajustar el css de Blazemonger:

.round_btn:after {
content:""; /* required property */
position: absolute;
top: 6px;
left: -1px;
border-top: 6px solid rgba(170,170,170,0.65);
height: 6px;
width: 19px;
}

Answer 9

Sí, agregando un elemento de envoltura adicional. Asigne el color de línea deseado a un elemento externo, luego el color de texto deseado al elemento interno. 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>

(Sin embargo, tenga en cuenta que <strike> se considera obsoleto en HTML4 y obsoleto en HTML5 ( vea también W3.org ). El enfoque recomendado es utilizar <del> si se pretende un verdadero significado de eliminación, o de lo contrario usar un <s> elemento o estilo con CSS de text-decoration como en el primer ejemplo aquí.)

Para que aparezca el tachado en un: hover, se debe usar una hoja de estilo explícita (declarada o referenciada en <HEAD> ). (La pseudo-clase :hover no se puede aplicar con los 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>

(Parece que IE7 requiere que se establezca algo de href en <a> antes de que :hover tenga un efecto; los navegadores basados ​​en FF y WebKit no).

Answer 10

Si no te importa Internet Explorer / edge, la forma más sencilla de lograr un color diferente para el tachado sería utilizar la propiedad CSS: color de decoración de texto junto con decoración de texto: línea de paso;

.yourClass {
text-decoration: line-through !important;
text-decoration-color: red !important;
}

- No funciona con Edge / Internet Explorer

Answer 11

A partir de febrero de 2016 , CSS 3 tiene el soporte mencionado a continuación. Aquí hay un fragmento de una página de producto único 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:

CSS 3 probablemente tendrá soporte directo usando la propiedad de text-decoration-color . En particular:

La propiedad CSS de text-decoration-color establece el color utilizado al dibujar subrayados, líneas o tachados especificados por text-decoration-line . Esta es la forma preferida de colorear estas decoraciones de texto, en lugar de usar combinaciones de otros elementos HTML.

También vea text-decoration-color en la especificación del borrador CSS 3 .

Si desea utilizar este método inmediatamente, probablemente tenga que prefijarlo, usando -moz-text-decoration-color . (También especifíquelo sin -moz- , para compatibilidad con versiones -moz- ).