CSS barrato colore diverso dal testo?

269

Gli elementi HTML del, strikeo spossono essere usati per un testo barrato effetto. Esempi:

<del>del</del>

.... dà: ~~del~~

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

.... dà: ~~sciopero~~ e ~~sciopero~~

La text-decorationproprietà CSS con un valore line-throughpuò essere utilizzata in modo simile. Il codice...

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

... sarà anche simile a: ~~text-decoration: line-through~~

Tuttavia, la linea barrata è in genere dello stesso colore del testo.

È possibile utilizzare CSS per rendere la linea di un colore diverso?

html css

— gojomo
fonte

Per uno sciopero trasparente attraverso l'effetto, puoi vedere il barrato trasparente sul testo

— web-tiki,

409

Sì, aggiungendo un ulteriore elemento di avvolgimento. Assegna il colore desiderato per la linea a un elemento esterno, quindi il colore del testo desiderato per l'elemento interno. Per esempio:

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

Espandi frammento

...o...

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

Espandi frammento

(Si noti, tuttavia, che <strike>è considerato deprecato in HTML4 e obsoleto in HTML5 ( vedere anche W3.org ). L'approccio raccomandato è quello di utilizzare <del>se si intende un vero significato di eliminazione o altrimenti utilizzare un <s>elemento o uno stile con text-decorationCSS come in il primo esempio qui.)

Per far apparire il barrato per un: hover, è necessario utilizzare un foglio di stile esplicito (dichiarato o indicato in <HEAD>). (La :hoverpseudo-classe non può essere applicata con attributi STYLE incorporati.) Ad esempio:

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

Espandi frammento

(Sembra che IE7 richieda che alcuni hrefsiano impostati sul <a>precedente :hoverha un effetto; i browser basati su FF e WebKit no.)

— gojomo
fonte

8

Questo per quanto riguarda il mio "è impossibile!" risposta.

— John Kugelman,

1

L'implementazione di Jquery sarebbe molto utile.

— Yakunins,

38

@utype Perché dovresti usare jQuery per questo?

— Kapa,

4

Gli elementi wrapper fanno schifo. Nella maggior parte dei casi è possibile ottenere quasi lo stesso effetto con un semplice pseudoelemento, cioè del { position:relative }e quindi del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }.

— incarnato il

2

Solo un involucro. Ingegnoso. Oh mio Dio, è meglio di tutto ciò che mi è venuto in mente (pseudo-elementi). Ottimo lavoro!

— CunningFatalist,

69

A partire da febbraio 2016 , CSS 3 ha il supporto menzionato di seguito. Ecco uno snippet dalla pagina del singolo prodotto di WooCommerce con lo sconto sul prezzo

/*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 */
}

Con il risultato di:

CSS 3 avrà probabilmente il supporto diretto usando la text-decoration-colorproprietà . In particolare:

La text-decoration-colorproprietà CSS imposta il colore utilizzato durante il disegno di sottolineature, sottolineature o barrature specificate da text-decoration-line. Questo è il modo preferito per colorare queste decorazioni di testo, piuttosto che usare combinazioni di altri elementi HTML.

Vedi anche text-decoration-colornella bozza delle specifiche CSS 3 .

Se si desidera utilizzare immediatamente questo metodo, probabilmente è necessario prefissarlo, utilizzando -moz-text-decoration-color. (Specificare anche senza -moz-, per compatibilità con il futuro.)

— Lumaca meccanica
fonte

2

"Probabilmente CSS 3 avrà" è piuttosto ... ottimista.

— BoltClock

5

@BoltClock: come è ottimista? È già nella bozza di lavoro del W3C, che viene perseguita attivamente.

— Lumaca meccanica

2

Secondo caniuse , attualmente nessun browser supporta (nel 2014) text-decoration-colorsenza prefissi.

— Blazemonger,

4

E 3 anni dopo ... Firefox e Safari lo hanno = 20% di copertura.

— André Werlang,

1

secondo il caneuse, attualmente è supportato solo da FireFox

— YakovL

35

Ho usato un :afterelemento vuoto e decorato un bordo su di esso. Puoi anche usare le trasformazioni CSS per ruotarla per una linea inclinata. Risultato: CSS puro, nessun elemento HTML aggiuntivo! Unico inconveniente: non si estende su più righe, anche se IMO non dovresti comunque usare la barratura su grandi blocchi di testo.

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>

Espandi frammento

— Blazemonger
fonte

@Veve HTML barrato elemento - la versione non semantica

— Blazemonger

1

grazie, ho cercato questo, specialmente la linea di rotazione

— hanan-mstudio,

Utilizzando un metodo: after è probabile che si verifichino problemi di accessibilità

— ewanm89,

9

Se non ti interessa Internet Explorer \ Edge, il modo più semplice per ottenere un colore diverso per barrare sarebbe usare la proprietà CSS: text-decoration-color in combinazione con text-decoration: line-through;

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

- Non funziona con Edge \ Internet Explorer

— Rohin Tak
fonte

7

Questo CSS3 ti renderà più semplice la gestione delle proprietà e funzionerà bene.

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

— Vishnu SR
fonte

6

Aggiungendo a @gojomo potresti usare lo :afterpseudo elemento per l'elemento aggiuntivo. L'unica avvertenza è che dovrai definire il tuo innerTextin un data-textattributo poiché il CSS ha contentfunzioni limitate .

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

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

Espandi frammento

— ibolmo
fonte

5

Ecco un approccio che utilizza un gradiente per simulare la linea. Funziona con avvertimenti multilinea e non necessita di elementi DOM aggiuntivi. Ma poiché è un gradiente di sfondo, è dietro il testo ...

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;
}

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

Le interruzioni di colore gradiente e le dimensioni dello sfondo dipendono dall'altezza della linea. (Ho usato MENO per il calcolo e la correzione automatica in seguito ...)

— Simbo
fonte

4

Ecco qui:

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

Espandi frammento

— Eugene Kardash
fonte

3

Nella mia esperienza il

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

non è l'opzione migliore. Ho avuto un collaboratore che utilizzava questo metodo senza testare il browser incrociato, quindi ho dovuto tornare indietro e risolverlo perché causava problemi in Firefox. La mia raccomandazione personale sarebbe quella di utilizzare il selettore: after per creare un barrato. In questo modo può tornare a IE8 se lo desideri davvero senza conflitti di stile e solido su tutti gli altri browser.

Crea anche meno markup e circa la stessa quantità di stile che secondo me è un grosso problema.

Quindi, se qualcun altro si imbatte in problemi simili, si spera che questo possa aiutare:

.lineThrough {
    position: relative;

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

ovviamente potresti usare transform: translate invece di margini, ma questo esempio è tornare a IE8

— Brady Edgar
fonte

2

La risposta di Blazemonger (sopra o sotto) deve essere votata, ma non ho abbastanza punti.

Volevo aggiungere una barra grigia su alcuni pulsanti rotondi CSS larghi 20px per indicare "non disponibile" e ho modificato il CSS di 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

L'assegnazione del colore di passaggio desiderato a un elemento genitore funziona anche per l'elemento di testo eliminato ( <del>), presupponendo che il client esegua <del>il rendering come passaggio a capo.

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

— kpowz
fonte

-4

Ecco una esempio di implementazione di jQuery - grazie alla risposta di gojomo e al suggerimento di utype (+1 per entrambi)

$(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');
  });
});

Il CSS per quello potrebbe essere

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

— Aximili
fonte

Quale parte non è valida? Ha funzionato su tutti i principali browser

— Aximili il

3

"Opere" e "valide" sono abbastanza distanti tra loro. I browser cercano di interpretare anche l'HTML che contiene numerosi errori. Vedi W3C Markup Validation Service , perché l'HTML valido è importante per tutti? , Attributi DIV HTML validi? su SO

— kapa il

Se non sbaglio, la modifica del nome dell'attributo in "data-special" dovrebbe renderlo HTML5 valido.

— Muhd,

13

jQuery per aggiungere un wrapper per ottenere un barrato colorato? Cosa siamo diventati ?!

— Chris Baker,

3

Sembra un possibile problema XSS: hai del testo in chiaro originalPrice, quindi reimmetterlo come HTML. Prova a usare .html()invece di .text(). O forse usa jQuery wrap().

— tuomassalo,