Elementy HTML del
, strike
lubs
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-decoration
z wartością line-through
moż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?
Odpowiedzi:
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:
...lub...
(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>
). (:hover
Pseudoklasa nie może być stosowana z wbudowanymi atrybutami STYLE.) Na przykład:href
zbioru być na<a>
zanim:hover
ma wpływ; FF i WebKit oparte przeglądarek nie.)źródło
del { position:relative }
I wtedydel::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }
.Od lutego 2016 r. CSS 3 ma wsparcie wymienione poniżej. Oto fragment strony pojedynczego produktu WooCommerce z obniżką ceny
Wynikające z:
CSS 3 prawdopodobnie będzie miał bezpośrednie wsparcie przy korzystaniu z tej
text-decoration-color
właściwości . W szczególności:Zobacz także
text-decoration-color
w 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ą).źródło
text-decoration-color
Bez prefiksów.Użyłem pustego
:after
elementu 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.źródło
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;
- Nie działa z Edge \ Internet Explorer
źródło
Ten CSS3 ułatwi ci przejście przez właściwość i będzie działał dobrze.
źródło
Dodając do @gojomo, możesz użyć
:after
pseudoelementu dla dodatkowego elementu. Jedynym zastrzeżeniem jest to, że trzeba zdefiniowaćinnerText
wdata-text
atrybucie od CSS ma ograniczonecontent
funkcje.źródło
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 ...
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 ...)
źródło
Proszę bardzo:
źródło
Z mojego doświadczenia wynika, że
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:
oczywiście możesz użyć transform: translate zamiast marginesów, ale ten przykład to powrót do IE8
źródło
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:
źródło
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/
źródło
Oto przykładowa implementacja jQuery - dzięki odpowiedzi gojomo i sugestii utype (+1 dla obu)
Może to być CSS
źródło
originalPrice
, a następnie wstrzykujesz go z powrotem jako HTML. Spróbuj użyć.html()
zamiast.text()
. A może użyj jQuery'swrap()
.