CSS pseudo-elementi

Slično kao pseudo-klase, i pseudo-elementi se dodaju kao ekstenzija na selektor i odnose se na posebne aspekte HTML elementa.

::first-letter Formatira prvo slovo teksta elementa
::first-line Formatira prvi red teksta elementa
::before Definiše novi tekst na početku elementa
::after Definiše novi tekst na kraju elementa
::selection Menja izgled selektovanog teksta u elementu

::first-letter

Primenjuje se na prvo slovo HTML elementa na koji se odnosi selektor. Postoje posebni slučajevi kada:

Međutim, ako tekst u bloku počinje slikom, ovaj pseudo-element neće "proraditi".

selektor::first-letter { [CSS deklaracije] }

Ovaj pseudo-element može biti primenjen samo na blok i inline-blok elemente, na stavke unutar liste, kao i tekst u ćeliji tabele (table-cell), odnosno naziv tabele (table-caption).

Za ovaj pseudo-elemenat ne možemo da upotrebimo sve CSS atribute. Evo šta nam je dozvoljeno:

::first-line

Primenjuje se na prvu tekstualnu liniju HTML elementa na koji se odnosi selektor.

selektor::first-line { [CSS deklaracije] }

Ovaj pseudo-element može biti primenjen samo na blok i inline-blok elemente, kao i tekst u ćeliji tabele (table-cell), odnosno naziv tabele (table-caption).

Ni za ovaj pseudo-elemenat ne možemo da upotrebimo sve CSS atribute. Evo šta nam je dozvoljeno:

::before

Dodaje novi element kao prvi element HTML elementa na koji se odnosi selektor. Sadržaj mu je moguće definisati CSS atributom content.

selektor::before { [CSS deklaracije] }

Logično, ovaj pseudo-element je moguće primeniti samo u slučaju da element ima sadržaj. To znači da ga ne možemo kreirati za elemente kao što je <img>, <br> i sl.

::after

Isto kao pseudo-elemenat ::before, dodaje poslednji element HTML elementa na koji se odnosi selektor. Sadržaj mu je moguće definisati CSS atributom content. Primena je potpuno ista kao malopre.

selektor::after { [CSS deklaracije] }

Vrednost atributa content, ne može biti baš sve što zamislimo - to može biti običan tekst, slika, navodnici. Moguće je iskoristiti i brojače ili čak ubaciti sadržaj određenog atributa iz HTML elementa. U svakom slučaju, ne možete kreirati nove elemente, tj. ubacivati cele HTML oznake.

Sa druge strane, ::before i ::after pseudo-elementi mogu prilično dobro da se formatiraju CSS atributima, - možemo im ubaciti pozadinu, dimenzije, pa čak ih i pozicionirati.

::selection

Odnosi se na selektovani deo teksta HTML elementa na koji se primenjuje selektor. Moguće je definisati samo boju teksta, boju pozadine i senku ispod teksta.

selektor::selection { [CSS deklaracije] }

Primer

Evo jednog simpatičnog primera koji će posle svakog linka dodati i njegov URL. Ovo je vrlo korisno ako pravimo verziju za štampu!


  <style>
    a::after {
      content: ' (' attr(href) ') ';
    }
  </style>
  ...
  <a href="http://www.primer.com">Klikni ovde</a>
  <!-- Ispisaće link kao: Klikni ovde (http://www.primer.com)  -->
  

U sledećem primeru kreiramo drop-cap efekat. Možete videti kakosmo iskombinovali pseudo-klasu i pseudo-element da bismo izdvojili prvo slovo samo prvog pasusa u tekstu.


  <style>
    p:first-of-type::first-letter {
      float: left;
      margin-top: 4px;
      font-size: 3.5em;
      line-height: 2em;
    }
  </style>
  ...
  <p>U ovom pasusu, početno slovo "U" će biti inicijal.</p>
  <p>Ovde neće biti nikakve promene.</p>

Pogledajte i interaktivni primer koji će vam prikazati još neke (ne)praktične upotrebe pseudo-elemenata.

css-sel-pseudo-elementi-sr
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.