Jak wykonać przekreślenie / skreślenie fragmentu tekstu na stronie z pomocą HTML i/lub CSS?

Czas czytania: < 1 minut

Przekreślenie tekstu zamieszczonego na stronie internetowej jest bardzo proste i szybkie w uzyskaniu.

W zależności od tego w jaki sposób wprowadzamy tekst na stronę do wyboru mamy HTML lub CSS. Watro tutaj wspomnieć, że jeśli korzystacie z edytora tekstu to prawdopodobnie będzie on dodawał znaczniki HTML.

Znaczniki te są dużo bardziej powszechne w przypadku tradycyjnych stron internetowych. Ograniczają się bowiem do pewnego obszaru (określonego przez osobę dodającą treść) i bardzo łatwo można je dodać.

Przekreślenie, skreślenie tekstu w HTML

W HTML posiadamy 2 typy znaczników, z pomocą których możemy przekreślić tekst na stronie internetowej. W przypadku pisanej przez nas samodzielnie strony to od nas tylko będzie zależało, na który z nich się zdecydujemy. Między uzyskanymi efektami nie będzie bowiem praktycznie żadnej różnicy.

Przekreślenie z użyciem <s></s>

przykład działania:

Przekreślony tekst

<s>Przekreślony tekst</s>

Przekreślenie z <del></del>

przykład:

Przekreślony tekst

<del>Przekreślony tekst </del>

Jak to wygląda w CSS:

Praktycznie jak do tej pory może ze dwa razy spotkałam się z przypadkiem by ktokolwiek korzystał z tej metody. W obu przypadkach przekreślenia pełniło bardziej rolę dekoracji (jak wskazuje sama nazwa). Prawdopodobnie wynika to, że metoda HTML jest dużo łatwiejsza i szybsza w użytkowaniu. Efekt końcowy jaki z jej pomocą można uzyskać jest dokładnie taki sam.

Przykład:

przekreślenie w css

<p style="text-decoration: line-through">przekreślenie w css</p>

To oczywiście tylko jedna z opcji zmiennej text-decorationU możliwa ona bowiem dodawanie podkreślenia w różnych miejscach. W efekcie z jej pomocą możemy ustawiać linie w różnych miejscach nie tylko przez środek tekstu, ale także np. nad i pod.

See the Pen
text-decoration
by Aura (@Julka85)
on CodePen.0