Header

CSS pseudo elementi

Pošalji komentar

Ocenite članak

 

CSS pseudo-element se koristi za oblikovanje pojedinih delova određenog HTML elementa, npr:

  • Stilizovanje prvog slova pasusa, ili prve linije
  • Ubacivanje sadržaja pre ili posle elementa


Sintaksa



1
.klasa::pseudo-element { /* Obratite pažnju na dvostruku dvotačku "::" */
2
svojstvo: vrednost;
3
}


Pseudo elementi



  • ::first-line



    Odnosi se na prvu liniju u bloku. Mogu se kontrolisati sledeća svojstva:

    • font
    • boje
    • pozadina
    • razmak izmеđu reči
    • razmak između slova
    • text-decoration
    • vertikalno poravnanje
    • transformacija teksta
    • visina linije
    • clear


  • ::first-letter



    Odnosi se na prvo slovo u bloku. Moguće je kontrolisati sledeća svojstva:



    Primer



    1
    p.intro::first-letter {
    2
    color: #ff0000;
    3
    font-size:200%;
    4
    }


  • ::before



    Koristi se za ubacivanje sadržaja ispred izabranog elementa.

  • ::after



    Koristi se za ubacivanje sadržaja posle izabranog elementa.

  • ::selection



    Kontrola prikaza dela stranice koji je korisnik obeležio. Mogu se kontrolisati sledeća svojstva:

    • color
    • background
    • cursor
    • outline


Višestruka upotreba pseudo elemenata



1
p::first-letter {
2
color: #ff0000;
3
font-size: xx-large;
4
}
5
6
p::first-line {
7
color: #0000ff;
8
font-variant: small-caps;
9
}