CSS tachado de cores diferentes do texto?

269

Os elementos HTML del, strikeou spodem ser usados para um texto tachado efeito. Exemplos:

<del>del</del>

.... dá: ~~del~~

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

.... dá: ~~greve~~ e ~~greve~~

A text-decorationpropriedade CSS com um valor line-throughpode ser usada de maneira semelhante. O código...

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

... também renderiza a aparência: ~~text-decoration: line-through~~

No entanto, a linha tachada é tipicamente da mesma cor que o texto.

CSS pode ser usado para tornar a linha de uma cor diferente?

html css gojomo
fonte

Para uma greve transparente através do efeito, você pode ver strikethrought transparente sobre texto

web-tiki

409

Sim, adicionando um elemento de quebra-cabeça extra. Atribua a cor de linha desejada a um elemento externo e, em seguida, a cor de texto desejada ao elemento interno. Por exemplo:

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

Expandir snippet

...ou...

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

Expandir snippet

(Observe, no entanto, que isso <strike>é considerado obsoleto no HTML4 e obsoleto no HTML5 ( consulte também o W3.org ). A abordagem recomendada é usar <del>se um verdadeiro significado de exclusão for pretendido ou usar um <s>elemento ou estilo com text-decorationCSS como em o primeiro exemplo aqui.)

Para fazer com que a tacada apareça em um: hover, uma folha de estilo explícita (declarada ou referenciada em <HEAD>) deve ser usada. (A :hoverpseudo-classe não pode ser aplicada com atributos STYLE embutidos.) Por exemplo:

<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 snippet

(O IE7 parece exigir que alguns hrefsejam configurados <a>antes :hovertenha efeito; os navegadores baseados no FF e no WebKit não.)

gojomo
fonte

8

Tanto para o meu "isso é impossível!" responda.

31419 John Kugelman

1

A implementação de Jquery seria muito útil.

Yakunins

38

@utype Por que você usaria o jQuery para isso?

Kapa

4

Os elementos do wrapper são meio ruins. Na maioria dos casos, você pode obter quase o mesmo efeito com o pseudoelemento simples, ou seja, del { position:relative }e então del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }.

encarnada

2

Apenas um invólucro. Engenhoso. Oh meu Deus, isso é melhor do que tudo que eu criei (pseudo-elementos). Bom trabalho!

CunningFatalist

69

Desde fevereiro de 2016 , o CSS 3 tem o suporte mencionado abaixo. Aqui está um trecho da página de produto único de um WooCommerce com desconto de preço

/*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 em:

CSS 3 provavelmente vai ter o apoio direto usando a text-decoration-colorpropriedade . Em particular:

A text-decoration-colorpropriedade CSS define a cor usada ao desenhar sublinhados, sublinhados ou rastreios especificados por text-decoration-line. Essa é a maneira preferida de colorir essas decorações de texto, em vez de usar combinações de outros elementos HTML.

Veja também text-decoration-colorno CSS 3 draft spec .

Se você quiser usar esse método imediatamente, provavelmente precisará prefixá-lo usando -moz-text-decoration-color. (Especifique-o também sem -moz-, para compatibilidade com a frente.)

Caracol mecânico
fonte

2

"CSS 3 provavelmente terá" é bastante ... otimista.

BoltClock

5

@BoltClock: Como é otimista? Já está no rascunho de trabalho do W3C, que está sendo buscado ativamente.

Caracol mecânico

2

De acordo com caniuse , atualmente não há navegadores (em 2014) compatíveis text-decoration-colorsem prefixos.

Blazemonger

4

E 3 anos depois ... Firefox e Safari têm isso = 20% do alcance.

André Werlang 23/03

1

de acordo com o caniuse, atualmente é suportado apenas pelo FireFox

YakovL 12/17/17

35

Eu usei um :afterelemento vazio e decorei uma borda nele. Você pode até usar transformações CSS para girá-lo para uma linha inclinada. Resultado: CSS puro, sem elementos HTML adicionais! Desvantagem: não quebra em várias linhas, embora o IMO não deva usar tachado em grandes blocos de texto.

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 snippet

Blazemonger
fonte

@Veve elemento HTML tachado - a versão não-semântico

Blazemonger

1

graças, que parecia para esta, especialmente a linha de rotação

Hanan-mstudio

Usando um: após método é provável que tenha problemas com acessibilidade

ewanm89

9

Se você não se importa com o Internet Explorer \ Edge, a maneira mais simples de obter cores diferentes para o strike-through seria usar a propriedade CSS: text-decoration-color em conjunto com text-decoration: line-through;

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

- Não funciona com o Edge \ Internet Explorer

Rohin Tak
fonte

7

Esse CSS3 fará com que você passe mais facilmente pelas propriedades e trabalhe bem.

span{
    text-decoration: line-through;
    text-decoration-color: red;
}

Vishnu SR
fonte

6

Adicionando ao @gojomo, você poderia usar o :afterpseudoelemento para o elemento adicional. A única ressalva é que você precisará definir o seu innerTextem um data-textatributo, pois o CSS tem contentfunções limitadas .

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

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

Expandir snippet

ibolmo
fonte

5

Aqui está uma abordagem que usa um gradiente para falsificar a linha. Ele funciona com avisos de várias linhas e não precisa de elementos DOM adicionais. Mas como é um gradiente de plano de fundo, está por trás do 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;
}

Veja violino: http://jsfiddle.net/YSvaY/

As paradas de cores em gradiente e o tamanho do plano de fundo dependem da altura da linha. (Usei LESS para cálculo e Autoprefixer depois ...)

simbo
fonte

4

Aqui está:

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

Expandir snippet

Eugene Kardash
fonte

3

Na minha experiência, o

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

não é a melhor opção. Eu tive um colega de trabalho usando esse método sem testar o navegador cruzado, então tive que voltar e corrigi-lo porque causava problemas no Firefox. Minha recomendação pessoal seria usar o seletor: after para criar um rasurado. Dessa forma, ele pode voltar ao IE8 se você realmente quiser, sem conflitos de estilo e sólidos em todos os outros navegadores.

Também cria menos marcação e aproximadamente a mesma quantidade de estilo que, na minha opinião, é um grande negócio.

Portanto, se alguém encontrar problemas semelhantes, espero que isso possa ajudar:

.lineThrough {
    position: relative;

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

obviamente, você pode usar transform: translate em vez de margens, mas este exemplo é para voltar ao IE8

Brady Edgar
fonte

2

A resposta do Blazemonger (acima ou abaixo) precisa ser votada - mas eu não tenho pontos suficientes.

Eu queria adicionar uma barra cinza em alguns botões redondos CSS de 20 px para indicar "não disponível" e ajustar o css do 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
fonte

0

Atribuir a cor de linha desejada a um elemento pai também funciona para o elemento de texto excluído ( <del>) - assumindo que o cliente processa<del> como uma linha.

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

kpowz
fonte

-4

Aqui está um exemplo de implementação do jQuery - graças à resposta do gojomo e à sugestão do 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');
  });
});

O CSS para isso pode ser

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

Aximili
fonte

Qual parte é inválida?

Porém

3

"Trabalhos" e "válidos" estão bem distantes um do outro. Os navegadores tentam interpretar até o HTML que possui vários erros. Consulte Serviço de validação de marcação do W3C . Por que o HTML válido é importante para todos? , Atributos DIV válidos em HTML? em SO

kapa

Se não me engano, alterar o nome do atributo para "data-special" deve torná-lo válido para HTML5.

Muhd

13

jQuery para adicionar um invólucro para obter uma passagem colorida? O que nos tornamos ?!

Chris Baker

3

Parece um possível problema de XSS: você tem texto sem formatação originalPricee o injeta novamente como HTML. Tente usar em .html()vez de .text(). Ou talvez use jQuery wrap().

tuomassalo

CSS tachado de cores diferentes do texto?

Respostas: