Jestliže denně napíšete hodně HTML5 a CSS3 kódu a nebo se zajímáte o tvorbu webových stránek tak jste určite slyšeli o CSS pseudo elementech které Vám dovedou usnadnit a zároveň urychlit práci při tvorbě webových stránek.
CSS pseudo elementy jsou přidány k HTML selektorům čímž Vám umožní přidání stylu k určitým částem HTML dokumentu nebo jak se dá taky říci CSS pseudo elementy jsou použity k přidání efektů k jistým HTML elementům.
Jste-li uživatelem Google Inspect Element nebo Mozilla Firefox Firebug plugin, pokud ano tak jste si jistě při inspekci kódu na různých webových stránkách všimli dvojitých dvojteček (::) a nebo jen dvojteček (:), obě dvě možnosti jsou správné ve většině webových prohledávačů. Osobně používám dvojité dvojtečky (::) které by v budoucnu měli mít 100% podporu ve všech internetových prohlízečích.
Kód:
p::before {
content: "- - ";
color:red;
font-weight: bold;
}
<p>::before CSS pseudo element umístní zadaný obsah před text.</p>
Výsledek:
::before CSS pseudo element umístní zadaný obsah před text.
Kód:
p::after {
content: " - -";
color:red;
font-weight: bold;
}
<p>::after CSS pseudo element umístní zadaný obsah za text.</p>
Výsledek:
::after CSS pseudo element umístní zadaný obsah za text.
Kód:
p::first-letter {
color:red;
font-weight:bold;
}
<p>Toto je jednoduchý příklad ::first-letter CSS pseudo elementu. Pouze první písmeno tohoto textu bude ovlivněno stylem z CSS pseudo elementem.</p>
Výsledek:
Toto je jednoduchý příklad ::first-letter CSS pseudo elementu. Pouze první písmeno tohoto textu bude ovlivněno stylem z CSS pseudo elementem.
Kód:
p::first-line {
color:red;
font-weight:bold;
}
<p>Tohle je další jednoduchý příklad ::first-line CSS pseudo elementu. Jestliže text v tomto paragrafu je dostatečně dlouhý a zabere více než dva řádky, ::first-line CSS pseudo element aplikuje styl pouze na první řádek.</p>
Výsledek:
Tohle je další jednoduchý příklad ::first-line CSS pseudo elementu. Jestliže text v tomto paragrafu je dostatečně dlouhý a zabere více než dva řádky, ::first-line CSS pseudo element aplikuje styl pouze na první řádek.
Podle webové stránky caniuse.com je podpora ::before a ::after CSS pseudo elementů ve všech webových prohlížečích na velice dobré úrovni což je výborný důvod začít tyto CSS elementy používat. Doufám že Vám tento krátký článek o CSS pseudo elementech pomohl lepšímu porozumění jak CSS pseudo elementy fungují.
