CSS przekreśla inny kolor niż tekst?

268

Elementy HTML del, strikelubs mogą być używane dla tekstu Strike-through skutku. Przykłady:

<del>del</del>

.... daje: ~~del~~

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

.... daje: ~~strajk~~ i ~~strajk~~

Właściwość CSS text-decorationz wartością line-throughmoże być używana podobnie. Kod...

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

... będzie również wyglądał następująco: ~~text-decoration: line-through~~

Jednak linia przekreślenia jest zwykle tego samego koloru co tekst.

Czy można użyć CSS, aby nadać linii inny kolor?

html css

— gojomo
źródło

Aby uzyskać przezroczysty efekt przekreślenia

— web-tiki

408

Tak, dodając dodatkowy element owijający. Przypisz pożądany kolor linii do elementu zewnętrznego, a następnie żądany kolor tekstu do elementu wewnętrznego. Na przykład:

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

Rozwiń fragment kodu

...lub...

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

Rozwiń fragment kodu

(Należy jednak pamiętać, że <strike>jest to uważane za przestarzałe w HTML4 i przestarzałe w HTML5 ( patrz także W3.org )). Zalecanym podejściem jest użycie, <del>jeśli prawdziwe znaczenie usunięcia jest zamierzone, lub użycie <s>elementu lub stylu ztext-decoration CSS jak w pierwszy przykład tutaj.)

Aby przekreślenie pojawiło się dla: hover, należy użyć jawnego arkusza stylów (zadeklarowanego lub powołanego w <HEAD>). ( :hoverPseudoklasa nie może być stosowana z wbudowanymi atrybutami STYLE.) Na przykład:

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

Rozwiń fragment kodu

(IE7 wydaje się wymagać pewnego hrefzbioru być na <a>zanim :hoverma wpływ; FF i WebKit oparte przeglądarek nie.)

— gojomo
źródło

8

Tyle o moim „to niemożliwe!” odpowiedź.

— John Kugelman,

1

Implementacja Jquery byłaby bardzo przydatna.

— yakunins,

38

@utype Dlaczego miałbyś do tego używać jQuery?

— kapa

4

Elementy opakowania są do bani. W większości przypadków można osiągnąć prawie taki sam efekt za pomocą prostego pseudoelementu, tj. del { position:relative }I wtedy del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }.

— wcielono

2

Tylko opakowanie. Pomysłowy. O mój boże, to lepsze niż wszystko, co wymyśliłem (pseudoelementy). Dobra robota!

— CunningFatalist

69

Od lutego 2016 r. CSS 3 ma wsparcie wymienione poniżej. Oto fragment strony pojedynczego produktu WooCommerce z obniżką ceny

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

Wynikające z:

CSS 3 prawdopodobnie będzie miał bezpośrednie wsparcie przy korzystaniu z tej text-decoration-colorwłaściwości . W szczególności:

Właściwość text-decoration-colorCSS ustawia kolor używany podczas rysowania podkreśleń, podkreśleń lub przekreśleń określonych przez text-decoration-line. Jest to preferowany sposób pokolorowania tych dekoracji tekstowych, zamiast używania kombinacji innych elementów HTML.

Zobacz także text-decoration-colorw specyfikacji roboczej CSS 3 .

Jeśli chcesz natychmiast użyć tej metody, prawdopodobnie musisz ją poprzedzić za pomocą -moz-text-decoration-color. (Podaj również bez -moz-, dla kompatybilności z przyszłością).

— Ślimak mechaniczny
źródło

2

„CSS 3 prawdopodobnie będzie miał” jest raczej ... optymistyczny.

— BoltClock

5

@BoltClock: Jak to jest optymistyczne? Jest już w projekcie roboczym W3C, który jest aktywnie realizowany.

— Ślimak mechaniczny

2

Według caniuse żadna przeglądarka nie obsługuje obecnie (w 2014 r.) text-decoration-colorBez prefiksów.

— Blazemonger

4

A 3 lata później ... Firefox i Safari mają = 20% zasięgu.

— André Werlang

1

zgodnie z kajakiem, obecnie jest obsługiwany tylko przez FireFox

— YakovL

35

Użyłem pustego :afterelementu i ozdobiłem na nim jedną ramkę. Możesz nawet użyć transformacji CSS, aby obrócić ją o nachyloną linię. Wynik: czysty CSS, bez dodatkowych elementów HTML! Wada: nie owija się w wiele wierszy, chociaż IMO nie powinna i tak używać przekreślania dużych bloków tekstu.

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>

Rozwiń fragment kodu

— Blazemonger
źródło

@Veve Element przekreślający HTML - wersja nie semantyczna

— Blazemonger

1

dzięki, szukałem tego, zwłaszcza linii obrotu

— hanan-mstudio

Korzystanie z metody: after może powodować problemy z dostępnością

— ewanm89,

9

Jeśli nie obchodzi Cię Internet Explorer \ Edge, najprostszym sposobem na uzyskanie innego koloru do przekreślenia byłoby użycie właściwości CSS: text-decoration-color w połączeniu z text-decoration -color : line-through;

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

- Nie działa z Edge \ Internet Explorer

— Rohin Tak
źródło

7

Ten CSS3 ułatwi ci przejście przez właściwość i będzie działał dobrze.

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

— Wisznu SR
źródło

6

Dodając do @gojomo, możesz użyć :afterpseudoelementu dla dodatkowego elementu. Jedynym zastrzeżeniem jest to, że trzeba zdefiniować innerTextw data-textatrybucie od CSS ma ograniczone contentfunkcje.

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

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

Rozwiń fragment kodu

— ibolmo
źródło

5

Oto podejście wykorzystujące gradient do sfałszowania linii. Działa z ostrzeżeniami wieloliniowymi i nie wymaga dodatkowych elementów DOM. Ale ponieważ jest to gradient w tle, jest za tekstem ...

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

Zobacz skrzypce: http://jsfiddle.net/YSvaY/

Gradientowe punkty zatrzymania kolorów i rozmiar tła zależą od wysokości linii. (Potem użyłem LESS do obliczeń, a potem Autoprefixer ...)

— simbo
źródło

4

Proszę bardzo:

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

Rozwiń fragment kodu

— Eugene Kardash
źródło

3

Z mojego doświadczenia wynika, że

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

nie jest najlepszą opcją. Miałem współpracownika używającego tej metody bez testowania przeglądarki, więc musiałem wrócić i naprawić, ponieważ spowodowało to problemy z Firefoksem. Moją osobistą rekomendacją byłoby użycie: po selektorze, aby utworzyć przekreślenie. W ten sposób może wrócić do IE8, jeśli naprawdę chcesz bez konfliktów stylowych, a także solidny we wszystkich innych przeglądarkach.

Tworzy również mniej znaczników i mniej więcej tyle samo stylizacji, co moim zdaniem jest dość dużą sprawą.

Mamy nadzieję, że jeśli ktoś napotka podobne problemy, może to pomóc:

.lineThrough {
    position: relative;

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

oczywiście możesz użyć transform: translate zamiast marginesów, ale ten przykład to powrót do IE8

— Brady Edgar
źródło

2

Odpowiedź Blazemongera (powyżej lub poniżej) wymaga głosowania - ale nie mam wystarczającej liczby punktów.

Chciałem dodać szary pasek do kilku okrągłych przycisków CSS o szerokości 20 pikseli, aby wskazać „niedostępny”, i poprawiłem css Blazemongera:

.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
źródło

0

Przypisanie pożądanego koloru przelotu do elementu nadrzędnego działa również dla usuniętego elementu tekstowego ( <del>) - przyjmując założenie, że klient renderuje <del>jako przelot .

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

— kpowz
źródło

-4

Oto przykładowa implementacja jQuery - dzięki odpowiedzi gojomo i sugestii utype (+1 dla obu)

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

Może to być CSS

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

— Aximili
źródło

Która część jest nieprawidłowa? Działa jednak we wszystkich głównych przeglądarkach

— Aximili

3

„Dzieła” i „ważne” są dość daleko od siebie. Przeglądarki próbują interpretować nawet HTML, który zawiera kilka błędów. Zobacz W3C Marid Validation Service , Dlaczego prawidłowy HTML jest ważny dla wszystkich? , Prawidłowe HTML atrybuty DIV? na SO

— kapa

Jeśli się nie mylę, zmiana nazwy atrybutu na „data-special” powinna sprawić, że będzie prawidłowy HTML5.

— Muhd

13

jQuery, aby dodać opakowanie, aby uzyskać kolorowe przekreślenie? Kim się staliśmy ?!

— Chris Baker

3

Wygląda na możliwy problem XSS: masz zwykły tekst originalPrice, a następnie wstrzykujesz go z powrotem jako HTML. Spróbuj użyć .html()zamiast .text(). A może użyj jQuery's wrap().

— tuomassalo