Domanda CSS ha barrato colori diversi dal testo?


Gli elementi HTML del, strike, o s possono essere tutti usati per un effetto strike-through del testo. Esempi:

<del>del</del>

.... dà: del

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

.... dà: sciopero e sciopero

Il CSS text-decoration proprietà con un valore line-through può essere usato allo stesso modo. Il codice...

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

... renderà anche il seguente aspetto: text-decoration: line-attraverso 

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

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


230
2017-07-10 03:35


origine


risposte:


Sì, aggiungendo un elemento di avvolgimento extra. Assegna il colore della linea diretta desiderato a un elemento esterno, quindi il colore del testo desiderato all'elemento interno. Per esempio:

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

(Nota, tuttavia, quello <strike> è considerato deprecato in HTML4 e obsoleto in HTML5 (vedi anche W3.org). L'approccio raccomandato è da usare <del> se un vero significato di cancellazione è inteso, o altrimenti usare un <s> elemento o stile con text-decoration CSS come nel primo esempio qui.)

Per fare apparire la barrata per a: hover, un foglio di stile esplicito (dichiarato o referenziato in <HEAD>) deve essere usato. (Il :hover la pseudo-classe non può essere applicata con gli attributi STYLE in linea.) 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>
(IE7 sembra richiedere alcuni href essere impostato su <a> prima :hover ha un effetto; I browser basati su FF e WebKit no.)


371
2017-07-10 03:36



A partire da febbraio 2016, CSS 3 ha il supporto indicato di seguito. Ecco un frammento della pagina di un 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: Text decoration example


Il CSS 3 avrà probabilmente un supporto diretto usando il text-decoration-color proprietà. In particolare:

Il text-decoration-color La proprietà CSS imposta il colore utilizzato quando si disegnano sottolineature, sovrapposizioni o strike-through specificati 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-color nella bozza delle specifiche CSS 3.

Se si desidera utilizzare questo metodo immediatamente, probabilmente si deve prefissarlo, utilizzando -moz-text-decoration-color. (Specificarlo anche senza -moz-, per compatibilità diretta.)


59
2018-06-04 04:49



Ho usato un vuoto :after elemento e decorato un bordo su di esso. Puoi persino usare le trasformazioni CSS per ruotarlo per una linea obliqua. Risultato: puro CSS, nessun elemento HTML in più! Lato negativo: non si avvolge su più righe, anche se IMO non si dovrebbe usare la barratura su grandi blocchi di testo comunque.

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>


30
2017-10-03 20:36



Aggiungendo a @gojomo che potresti utilizzare :after pseudo elemento per l'elemento aggiuntivo. L'unica avvertenza è che dovrai definire il tuo innerText in un data-text attributo poiché CSS ha limitato content funzioni.

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>

5
2017-08-22 15:09



Ecco un approccio che utilizza un gradiente per falsificare la linea. Funziona con attacchi multilinea e non ha bisogno di ulteriori elementi DOM. Ma poiché è un gradiente di sfondo, è dietro al 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 il violino: http://jsfiddle.net/YSvaY/

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


5
2018-03-11 10:41



Ecco qui:

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


3
2017-08-08 16:50



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

Volevo aggiungere una barra grigia su alcuni pulsanti rotondi CSS di 20px di larghezza per indicare "non disponibile" e css di Blazemonger ottimizzato:

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

2
2017-10-30 11:45



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 di utilizzare questo metodo senza testare cross browser, quindi ho dovuto tornare indietro e correggerlo perché ha causato 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 si vuole davvero senza conflitti di stile e solido su tutti gli altri browser.

Inoltre crea meno markup e circa la stessa quantità di stile che a mio parere è 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 al posto dei margini, ma questo esempio è tornare a IE8


2
2018-01-26 16:13



Assegnare il colore line-through desiderato a un elemento genitore funziona per l'elemento di testo eliminato (<del>) pure - rendendo l'ipotesi che il client rende <del> come una linea.

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


0
2018-03-22 02:44