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

Czas czytania: < 1 minut

Przekreślenie tekstu na stronie internetowej jest bardzo proste i niespecjalnie czasochłonne. W zależności od tego w jaki sposób wprowadzamy tekst na stronę do wyboru zazwyczaj mamy HTML i 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 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 <s></s>

przykład:

Przekreślony tekst

<s>Przekreślony tekst</s>

 

Przekreślenie <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.