.:Sintaksa

Sintaksa psevdo elementa:

ukaz:psevdo_element {lastnost: vrednost}

CSS class-i so lahko uporabljeni tudi z psevdo elementi:

ukaz.class:psevdo_element {lasntnost: vrednost}
 

.:Psevdo element "first-line"

Psevdo element "first-line" spada k elementu <p> v HTML-ju in pomeni prvo vrstico tega odstavka:

p {font-size: 12pt}
p:first-line {color: #0000FF font-variant: small-caps}
<p>To je prva vrstica tega odstavka ...</p>

Tako izgleda ta primer:

To je prva vrstica tega odstavka
druga vrstica pa je normanlna.

Pri Psevdo elementu "first-line" lahko uporabimo naslednje lastnosti:

.:Psevdo element "first-letter" 

Z psevdo elementom "first-leter" določamo lastno prve črke v odstavku:

p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}
<p>To je prvi stavek odstavka</p>

Izgleda nekako takole:

___
  |  o je prvi 
  |  s t a v e k
odstavka.

Kaj vse lahko določamo temu elementu:

.:Psevdo element in CSS class

Psevdo element lahko kombiniramo s CSS class tako: 

p.ime_classa:first-letter {color: #FF0000}
<p class="ime_classa">To je tekst</p>

Prva črka tega odstavka bo rdeče barve.

.:Uporabimo lahko več psevdo elementov

Takole jih uporabimo več:

p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}
<p>To je prvi stavek tega odstavka</p>

Tako izgleda ta primer:

To je prvi 
stavek tega
odstavka.

.:Psevdo element "before"

Z psevdo elementom lahko določimo lastnost, ki se zgodi prej, ko se prikaže ta element.

Tako naprimer lahko določimo, da bo prej ko prikaže naslov <h1> zaigral nek zvok:

h1:before
{
content: url('zvok.wav')
}
 

.:Psevdo element "after"

Z psevdo elementom lahko določimo lastnost, ki se zgodi po tem, ko se prikaže ta element.

Tako naprimer lahko določimo, da bo po tem, ko prikaže naslov <h1> zaigral nek zvok:

h1:after
{
content: url('zvok.wav')
}
 

.:Psevdo elementi

NN: Netscape, IE: Internet Explorer, W3C: Web Standard

Psevdo element NN IE W3C Opis
first-letter   5.5 CSS1 Določimo lastnost prve črke
first-line   5.5 CSS1 Določimo lastnost prve vrstice odstavka
:before     CSS2 Dodamo lastnost nekemu elementu, prej ko se prikaže
:after     CSS2 Dodamo lastnost nekemu elementu, po tem, ko se prikaže