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

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:

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