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- ).