CSS durch andere Farbe als Text streichen?

268

Die HTML - Elemente del, strikeoder salle für einen Text strike-through - Effekt verwendet werden können. Beispiele:

<del>del</del>

.... gibt: ~~del~~

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

.... gibt: ~~Streik~~ und ~~Streik~~

Die CSS- text-decorationEigenschaft mit einem Wert line-throughkann auf ähnliche Weise verwendet werden. Der Code...

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

... wird auch so gerendert, dass es aussieht wie: ~~Textdekoration: Line-Through~~

Die durchgestrichene Linie hat jedoch normalerweise dieselbe Farbe wie der Text.

Kann CSS verwendet werden, um die Linie in einer anderen Farbe zu gestalten?

html css gojomo
quelle

Für einen transparenten Strike-Through-Effekt können Sie transparente Strikeethrought auf Text sehen

Web-Tiki

408

Ja, indem Sie ein zusätzliches Umhüllungselement hinzufügen. Weisen Sie einem äußeren Element die gewünschte Durchgangsfarbe und dem inneren Element die gewünschte Textfarbe zu. Beispielsweise:

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

Erweitern Sie das Snippet

...oder...

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

Erweitern Sie das Snippet

(Beachten Sie jedoch, dass <strike>sich in HTML4 veraltet und überholt in HTML5 betrachtet ( siehe auch W3.org ). Der empfohlene Ansatz verwenden , <del>wenn eine wahre Bedeutung des Löschens soll, oder sonst ein verwenden <s>Element oder Stil mit text-decorationCSS wie in das erste Beispiel hier.)

Damit das Durchgestrichen für einen: Hover angezeigt wird, muss ein explizites Stylesheet (deklariert oder referenziert in <HEAD>) verwendet werden. (Die :hoverPseudoklasse kann nicht mit Inline-STYLE-Attributen angewendet werden.) Zum Beispiel:

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

Erweitern Sie das Snippet

(IE7 scheint zu erfordern, dass einige hrefEinstellungen vorgenommen werden, <a>bevor dies :hoverAuswirkungen hat. FF- und WebKit-basierte Browser tun dies nicht.)

gojomo
quelle

8

Soviel zu meinem "das ist unmöglich!" Antworten.

John Kugelman

1

Jquery-Implementierung wäre sehr nützlich.

Yakunins

38

@utype Warum würden Sie dafür jQuery verwenden?

Kapa

4

Wrapper-Elemente saugen irgendwie. In den meisten Fällen können Sie mit einfachem Pseudoelement fast den gleichen Effekt erzielen, dh del { position:relative }und dann del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }.

Inkarnation

2

Nur eine Hülle. Genial. Oh mein Gott, das ist besser als alles, was ich mir ausgedacht habe (Pseudo-Elemente). Gut gemacht!

CunningFatalist

69

Ab Februar 2016 bietet CSS 3 die unten genannte Unterstützung. Hier ist ein Ausschnitt aus einer einzelnen WooCommerce-Produktseite mit Preisnachlass

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

Ergebend:

CSS 3 wird wahrscheinlich direkte Unterstützung bei der Verwendung der text-decoration-colorEigenschaft haben . Bestimmtes:

Die text-decoration-colorCSS-Eigenschaft legt die Farbe fest, die beim Zeichnen von Unterstrichen, Überstrichen oder Durchstichen verwendet wird text-decoration-line. Dies ist die bevorzugte Methode zum Färben dieser Textdekorationen, anstatt Kombinationen anderer HTML-Elemente zu verwenden.

Siehe auch text-decoration-colorin der CSS 3-Entwurfsspezifikation .

Wenn Sie diese Methode sofort verwenden möchten, müssen Sie sie wahrscheinlich mit dem Präfix verwenden -moz-text-decoration-color. (Geben Sie es aus Gründen der -moz-Vorwärtskompatibilität auch ohne an .)

Mechanische Schnecke
quelle

2

"CSS 3 wird wahrscheinlich haben" ist eher ... optimistisch.

BoltClock

5

@ BoltClock: Wie ist es optimistisch? Es ist bereits im W3C-Arbeitsentwurf enthalten, der aktiv verfolgt wird.

Mechanische Schnecke

2

Laut caniuse unterstützen derzeit (2014) keine Browser text-decoration-colorohne Präfixe.

Blazemonger

4

Und 3 Jahre später ... Firefox und Safari haben es = 20% der Reichweite.

André Werlang

1

Laut Caniuse wird derzeit nur von FireFox unterstützt

YakovL

35

Ich habe ein leeres :afterElement verwendet und einen Rand darauf verziert. Sie können sogar CSS-Transformationen verwenden, um sie für eine schräge Linie zu drehen. Ergebnis: reines CSS, keine zusätzlichen HTML-Elemente! Nachteil: Wird nicht über mehrere Zeilen gewickelt, obwohl IMO Sie ohnehin nicht für große Textblöcke durchgestrichen verwenden sollten.

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>

Erweitern Sie das Snippet

Blazemonger
quelle

@Veve HTML Strikethrough-Element - die nicht-semantische Version

Blazemonger

1

danke, ich habe danach gesucht, speziell nach der

Drehlinie

Die Verwendung einer: after-Methode hat wahrscheinlich Probleme mit der Barrierefreiheit

ewanm89

9

Wenn Sie sich nicht für den Internet Explorer \ edge interessieren, können Sie am einfachsten eine andere Farbe für das Durchstreichen erzielen, indem Sie die CSS-Eigenschaft verwenden: Textdekoration-Farbe in Verbindung mit Textdekoration: Line-Through;

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

- Funktioniert nicht mit Edge \ Internet Explorer

Rohin Tak
quelle

7

Dieses CSS3 erleichtert Ihnen das Durchlaufen von Eigenschaften und funktioniert einwandfrei.

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

Vishnu SR
quelle

6

Wenn Sie @gojomo hinzufügen, können Sie ein Pseudoelement :afterfür das zusätzliche Element verwenden. Die einzige Einschränkung ist, dass Sie Ihre innerTextin einem data-textAttribut definieren müssen, da CSS nur über eingeschränkte contentFunktionen verfügt.

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

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

Erweitern Sie das Snippet

ibolmo
quelle

5

Hier ist ein Ansatz, bei dem ein Gradient verwendet wird, um die Linie zu fälschen. Es funktioniert mit mehrzeiligen Streiks und benötigt keine zusätzlichen DOM-Elemente. Da es sich jedoch um einen Hintergrundverlauf handelt, befindet er sich hinter dem Text ...

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

Siehe Geige: http://jsfiddle.net/YSvaY/

Farbverläufe und Hintergrundgröße hängen von der Linienhöhe ab. (Ich habe WENIGER für die Berechnung und Autoprefixer danach verwendet ...)

simbo
quelle

4

Bitte schön:

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

Erweitern Sie das Snippet

Eugene Kardash
quelle

3

Nach meiner Erfahrung die

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

ist nicht die beste Option. Ich ließ diese Methode von einem Kollegen verwenden, ohne den Cross-Browser zu testen. Daher musste ich zurückgehen und sie beheben, da sie Probleme in Firefox verursachte. Meine persönliche Empfehlung wäre, den: after-Selektor zu verwenden, um einen Durchstreich zu erstellen. Auf diese Weise kann es zu IE8 zurückkehren, wenn Sie wirklich ohne Stilkonflikte und solide über alle anderen Browser hinweg möchten.

Es erzeugt auch weniger Markup und ungefähr die gleiche Menge an Styling, was meiner Meinung nach eine ziemlich große Sache ist.

Wenn also jemand auf ähnliche Probleme stößt, kann dies hoffentlich helfen:

.lineThrough {
    position: relative;

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

Natürlich könnten Sie transform: translate anstelle von Rändern verwenden, aber in diesem Beispiel wird auf IE8 zurückgegriffen

Brady Edgar
quelle

2

Blazemongers Antwort (oben oder unten) muss abgestimmt werden - aber ich habe nicht genug Punkte.

Ich wollte einen grauen Balken über einige runde CSS-Schaltflächen mit einer Breite von 20 Pixel hinzufügen, um "nicht verfügbar" anzuzeigen, und Blazemongers CSS optimieren:

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

0

Das Zuweisen der gewünschten Durchgangsfarbe zu einem übergeordneten Element funktioniert auch für das gelöschte Textelement ( <del>). Dabei wird davon ausgegangen, dass der Client <del>eine Durchgangsfarbe rendert .

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

kpowz
quelle

-4

Hier ist ein Beispiel für eine jQuery-Implementierung - dank der Antwort von gojomo und des Vorschlags von utype (+1 für beide)

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

Das CSS dafür könnte sein

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

Aximili
quelle

Welcher Teil ist ungültig? Es funktionierte jedoch auf allen

gängigen

3

"Werke" und "gültig" sind ziemlich weit voneinander entfernt. Browser versuchen, auch HTML zu interpretieren, das mehrere Fehler enthält. Siehe W3C Markup Validation Service . Warum ist gültiges HTML für alle wichtig? , HTML gültige DIV-Attribute? auf SO

Kapa

Wenn ich mich nicht irre, sollte das Ändern des Attributnamens in "data-special" zu einem gültigen HTML5 führen.

Muhd

13

jFür einen Wrapper hinzufügen, um einen farbigen Durchschlag zu erzielen? Was sind wir geworden?!

Chris Baker

3

Scheint ein mögliches XSS-Problem zu sein: Sie haben einfachen Text originalPriceund fügen ihn dann als HTML zurück. Versuchen Sie es mit .html()anstelle von .text(). Oder verwenden Sie jQuery's wrap().

Tuomassalo

CSS durch andere Farbe als Text streichen?

Antworten: