CSS tachado de diferente color del texto?

269

Los elementos HTML del, strikeo spueden ser usados para un texto tachado efecto. Ejemplos:

<del>del</del>

....da: del

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

.... da: huelga y huelga

La text-decorationpropiedad CSS con un valor line-throughpuede usarse de manera similar. El código...

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

... también se verá como: text-decoration: line-through

Sin embargo, la línea tachada es típicamente del mismo color que el texto.

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

html css gojomo
fuente
Para un efecto de tachado transparente
web-tiki

Respuestas:

409

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>
Expandir fragmento

...o...

<strike style='color:red'>
  <span style='color:black'>black with red strikethrough<span>
</strike>
Expandir fragmento

(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 usar <del>si se pretende un verdadero significado de eliminación, o de lo contrario usar un <s>elemento o estilo con text-decorationCSS como en el primer ejemplo aquí)

Para hacer que el tachado aparezca para: hover, se <HEAD>debe usar una hoja de estilo explícita (declarada o referenciada ). (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>
Expandir fragmento
(IE7 parece requerir que algunos hrefse configuren <a>antes :hovertiene efecto; los navegadores basados ​​en FF y WebKit no lo hacen).

gojomo
fuente
8
Demasiado para mi "¡eso es imposible!" responder.
John Kugelman el
1
La implementación de jquery sería muy útil.
yakunins
38
@utype ¿Por qué usarías jQuery para esto?
kapa
44
Los elementos de envoltura apestan un poco. En la mayoría de los casos, puede lograr casi el mismo efecto con un pseudoelemento simple, es decir, del { position:relative }y luego del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }.
Encarnado el
2
Solo una envoltura. Ingenioso. Dios mío, eso es mejor que todo lo que se me ocurrió (pseudo-elementos). ¡Gran trabajo!
CunningFatalist
69

A partir de febrero de 2016 , CSS 3 tiene el soporte mencionado 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: Ejemplo de decoración de texto

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

La text-decoration-colorpropiedad CSS establece el color que se utiliza al dibujar subrayados, líneas generales 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.

Ver también text-decoration-coloren el CSS 3 borrador de especificaciones .

Si desea utilizar este método de inmediato, probablemente deba prefijarlo utilizando -moz-text-decoration-color. (Especifíquelo también sin -moz-, para compatibilidad de reenvío).

Caracol mecánico
fuente
2
"CSS 3 probablemente tendrá" es bastante ... optimista.
BoltClock
55
@BoltClock: ¿Cómo es optimista? Ya está en el borrador de trabajo del W3C, que se está buscando activamente.
Caracol mecánico
2
Según caniuse , actualmente no hay navegadores (en 2014) compatibles text-decoration-colorsin prefijos.
Blazemonger
44
Y 3 años después ... Firefox y Safari lo tienen = 20% de alcance.
André Werlang
1
Según el caniuse, actualmente solo es compatible con Firefox
YakovL
35

He usado un :afterelemento vacío y he decorado un borde en él. Incluso puede usar transformaciones CSS para rotarlo para una línea inclinada. Resultado: CSS puro, ¡sin elementos HTML adicionales! Desventaja: no se ajusta a través de 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>
Expandir fragmento

Blazemonger
fuente
@Veve HTML tachado elemento - la versión no semántica
Blazemonger
1
gracias, busqué esto, especialmente la línea de rotación
hanan-mstudio
El uso de un: después método es probable que tenga problemas con la accesibilidad
ewanm89
9

Si no le interesa Internet Explorer \ edge, la forma más sencilla de lograr un color diferente para tachado sería utilizar la propiedad CSS: text-decoration-color junto con text-decoration: line-through;

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

- No funciona con Edge \ Internet Explorer

Rohin Tak
fuente
7

Este CSS3 hará que la línea de propiedad sea más fácil y funcione bien. 

span{
    text-decoration: line-through;
    text-decoration-color: red;
}
Vishnu SR
fuente
6

Agregando a @gojomo, podría usar el :afterpseudo elemento para el elemento adicional. La única advertencia es que necesitarás definir tu innerTexten un data-textatributo ya que CSS tiene contentfunciones limitadas .

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

ibolmo
fuente
5

Aquí hay un enfoque que utiliza un gradiente para falsificar la línea. Funciona con ataques multilínea y no necesita elementos DOM adicionales. Pero como es un degradado 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 violín: http://jsfiddle.net/YSvaY/

Las paradas de color de degradado y el tamaño del fondo dependen de la altura de la línea. (Utilicé MENOS para el cálculo y el Autoprefixer después ...)

simbo
fuente
4

Aqui tienes:

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

Eugene Kardash
fuente
3

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 utilizó este método sin probar el navegador cruzado, así que tuve que volver y arreglarlo porque causaba problemas en Firefox. Mi recomendación personal sería usar el selector: after 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 marcado y casi la misma cantidad de estilo, que en mi opinión es bastante importante.

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ía usar transform: translate en lugar de márgenes, pero este ejemplo es volver a IE8

Brady Edgar
fuente
2

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

Quería agregar una barra gris en algunos botones redondos CSS de 20 píxeles de ancho para indicar "no disponible" y modifiqué 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;
}
anoldermark
fuente
0

Asignar el color de línea de destino deseado a un elemento primario también funciona para el elemento de texto eliminado ( <del>), asumiendo que el cliente representa <del>como una línea de paso.

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

kpowz
fuente
-4

Aquí hay una implementación de muestra 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; }
Aximili
fuente
¿Qué parte no es válida? Sin embargo
Aximili,
3
"Works" y "valid" están bastante lejos el uno del otro. Los navegadores intentan interpretar incluso HTML que tiene varios errores. Consulte el Servicio de validación de marcado del W3C . ¿Por qué el HTML válido es importante para todos? , Atributos HTML válidos DIV? en SO
kapa
Si no me equivoco, cambiar el nombre del atributo a "datos especiales" debería hacerlo HTML5 válido.
Muhd
13
jQuery para agregar un contenedor para obtener un tachado de color? ¿En qué nos hemos convertido?
Chris Baker
3
Parece un posible problema de XSS: tiene texto plano originalPricey luego lo vuelve a inyectar como HTML. Intenta usar en .html()lugar de .text(). O tal vez use jQuery's wrap().
tuomassalo