CSS Pseudo-elementy

CSS pseudo-elementy sa pou?ívajú na pridávanie efektov na nejaké selektory.

Príklady

Prvé písmeno je ?peciálne
Tento príkald predvádza, ako prida? ?peciálny efekt na prvé písmeno textu.

Prvý riadok je ?peciálny
Tento príklad predvádza, ako prida? ?peciálny efekt do prvého riadka textu.

Prvé písmeno a prvý riadok je ?peciálny
Tento príklad predvádza, ako prida? ?peciálny efekt na prvé písmeno a prvý riadok textu

Pou?itie :before na vlo?enie nejakého obsahu pred obsah elementu (Nefunguje v IE)
Tento príkald predvádza, ako pou?i? :before pseudo-element na vlo?enie obrázka pred element.

Pou?itie :after na vlo?enie nejakého obsahu za obsah elementu (Nefunguje v IE)
Tento príklad predvádza, ako pou?i? :after pseudo-element na vlo?enie obrázka za element.

Syntax

syntax pre pseudo-elements:

selector:pseudo-element {property: value}

CSS triedy mô?u by? pou?ité aj s pseudo-elementmi:

selector.class:pseudo-element {property: value}

:first-line Pseudo-element

"first-line" pseudo-element je pou?ívaný na pridanie ?peciálnych ?týlov na prvý riadok textu v selektore:

p:first-line {color:#0000ff;font-variant:small-caps}

<p>Nejaký text, ktorý kon?í v druhom riadku</p>

The output could be something like this:

V príklade hore, prehliada? zobrazí prvý riadok formátovaný pod?a "first-line" pseudo elementu. Kde prehliada? zalomí riadok v závislosti od ve?kosti okna prehliada?a.

Pozn: "first-line" pseudo-element mô?e by? pou?itý len s block-level elementami.

Pozn: Následujpce vlastnosti elementov sa aplikujú na "first-line" pseudo element:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

:first-letter Pseudo-element

"first-letter" pseudo-element je pou?itý na pridanie ?peciálneho ?týlu na prvé písmenu textu v selektore:

p:first-letter {color:#ff0000;font-size:xx-large}

<p>Prvé slová nejakého ?lánku...</p>

Výstup bude vyzera? asi ako toto:

Pozn: "first-letter" pseudo-element sa mô?e pou?i? len s block-level elementami.

Pozn: Následujúce vlastnosti sa aplikujú na "first-letter" pseudo-element: 

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (len ak 'float' je 'none')
• text-transform
• line-height
• float
• clear

Pseudo-elementy and CSS Triedy

Pseudo-elementy sa mô?u kombinova? s CSS triedami:

p.article:first-letter {color:#ff0000}

<p class="article">Odstavec nejakého ?lánku</p>

Príklad hore urobí prvé písmeno v?etkých odstavcov s triedou "article" ?ervenými.

Viaceré Pseudo-elementy

Ve?a pseudo-elementov sa mô?e kombinova?:

p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}

<p>Prvé slová nejakého ?lánku...</p>

Výstup by mohol by? asi ako toto:

V príklade hore, prvé písmeno v odstavci bude ?ervené s ve?kos?ou fontu 24pt. Ostatná ?as? prvého riadku bude modrá, ak to bude defaultná farba textu.

CSS2 - :before Pseudo-element

":before" pseudo-element sa mô?e pou?íva? na vlo?enie nejkého obsahu pred obsah nejakého elementu.

?týl dole prehraje zvuk pred výskytom nejakého <h1> elementu:

CSS2 - :after Pseudo-element

":after" pseudo-element sa mô?e pou?i? na vlo?enie nejakého obsahu pred obsah nejakého elementu.

?tyýl dolu prehraje zvuk za ka?dým výskytom nejakého <h1> elementu:

Pseudo-elementy

Podpora prehliada?ov: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: ?íslo vo "W3C" st?pci indikuje, pre ktoré CSS odporú?anie je vlastnos? definovaná (CSS1 alebo CSS2).