Tato značka slouží pro škrtání obsahu. Používá se stejně jako značky <h1>, <span>, <div>, což znamená, že je párová. Musí mít začátek <s> a konec </s>. Zdrojový kód:
<s>Toto je přeškrtnutý text pomocí značky <s> v CSS.</s>
Pro správné vypsání jsem pochopitelně musel výpis fráze „<s>“ zaentinovat (aby se podruhé neprovedl, nýbrž vypsal.
Proč používat značku <s> a ne značku <del>?
Jak jste si jistě všimli, na předchozí ukázce je pouze základní zápis značky <s>. Ano, samozřejmě uznávám, že existuje i značka <del>, která je také párová. Značka <del> byla vyvinuta předevšim pro nahrazování již neplatného textu. Chci tím říci, že značkou <del> škrtáme již neplatný obsah, informaci. Nyní se ale budeme věnovat především značce <s>.
<del>Neplatné sdělení</del>. <p>Platné sdělení</p>
Stylování značky <s>
Značka <s> jde pochopitelně velmi dobře stylovat pomocí (většinou) externího CSS.
→ Šikmé přeškrtnutí pomocí CSS
Ano, i to je možné. Tuto variantu asi často vídáte na různých nákupních serverech. Přeškrtnutí už ale nebude tak jednoduhé (= podpora ve starších prohlížečích). I tak se dá do CSS zapsat:
s {
position: relative;
text-decoration: none;
}
s:before {
position: absolute;
content: "";
left: 0;
right: 0;
top: 50%;
border-top: 1px solid #000;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}
A HTML tedy bude vypadat následovně:
<p><s>Neplatné sdělení</s></p>
<p>Platné sdělení</p>
CSS jsme vlastně druhým zápisem s before deklarovali „nasměrování“ přeškrtnutí na text, a pomocí prvního zápisu, aby se text neotáčel spolu s přeškrtnutím.
→ Cenové přeškrtnutí (jako u e-shopu)
Přeškrtnutí starých cen a nahrazení novými je velmi lehké. Pokud bychom chtěli mít starou cenu červeně přeškrtnutou a novou cenu tučně zelenou, stačí si pohrát barvami:
HTML:
<p>Dříve: <s>250,- Kč s DPH</s></p>
<p>Nyní: <span>180,- Kč s DPH</span></p>
CSS:
s {
position: relative;
text-decoration: none;
background
}
s:before {
position: absolute;
content: "";
left: 0;
right: 0;
top: 50%;
border-top: 2px solid red;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}
span {
color: green;
font-weight: bold;
}