CSS pseudo elementy

Datum:

CSS pseudo elementy

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..

Typy CSS pseudo elementů

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.

::before pseudo element

Kód:

    
p::before {
  content: "-- ";
}
   
<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.

::after pseudo element

Kód:

    
p::after {
  content: " --";
}
   
<p>::after CSS pseudo element umístní zadaný obsah za text.</p>
    

Výsledek:

::after CSS pseudo element umístní zadaný obsah za text.

::first-letter pseudo element

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.

::first-line pseudo element

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.

Reference

Závěr

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í.

 

Máte-li dotaz nebo připomínku k tomuto článku, kontaktujte mě prosím zde.


  |    |