CSS pseudo elementi : CSS Pseudo Elements

CSS pseudo elementi : CSS Pseudo Elements

Ova svojstva se ne nasljeđuju od roditelja na potomke.

Sintaksa : Syntax

Sintaksa za pseudo elemente se nešto razlikuje u odnosu na uobičajeni css kôd.

Obrazac je:

selector:pseudo-element {
  svojstvo: vrijednost;
}

Koristeći navedeni obrazac možemo dodijeliti slijedeće pseudo elemente:

first-line

first-letter

Web dizajn elementi!

Prvi redak : First Line

Pseudo element first-line određuje svojstva prvog retka teksta blok elementa.

Primjer:

p {
  font-size: small;
}
p:first-line {
  font-size: medium;
  color: green;
}

Gornji primjer zadaje malu veličinu slova teksta svih odlomaka. Pomoću selektora p:first-line zadajemo svojstva prvih redaka u svim odlomcima, ispis srednjom veličinom slova, zelene boje.

Slijedeća svojstva mogu biti dodijeljena pseudo elementu first-line:

background

clear

color

font

letter-spacing

line-height

text-decoration

text-transform

vertical-align

word-spacing

Prvo slovo : First Letter

Pseudo element first-letter određuje svojstva prvog slova teksta blok elementa.

Primjer:

p {
	font-size: small;
}
p:first-letter {
	font-size: medium;
	color: red;
}

Gornji primjer zadaje malu veličinu slova u svim odlomcima. Pomoću pseudo elementa first-letter postavljamo svojstvo prvog slova u svim odlomcima, ispis srednjom veličinom slova, crvene boje.

Slijedeća svojstva mogu biti dodijeljena pseudo elementu

Slijedeća svojstva mogu biti dodijeljena pseudo elementu first-letter:

background

clear

color

float

font

line-height

margin

padding

text-decoration

text-transform

word-spacing