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:
- tekst počinje interpunkcijskim znakom (npr. navodnicima) - kao prvo slovo se računa i interpukcija i prvo slovo teksta
- tekst počinje digrafom (slovo koje se u stvari sastoji iz dva znaka) - teorjski, trebalo bi da oba znaka budu posmatrana kao celina
- za isti element je definisan i ::before pseudo-element koji ubacuje tekst na početku elementa - tada se uzima prvo slovo pseudo-elementa before.
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:
- atributi fonta, atributi teksta
- atributi za kontrolu pozadine
- margine, unutrašnje margine i okviri
- color, word-spacing, letter-spacing, float, line-height, vertical-align, box-shadow
::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:
- atributi fonta, atributi teksta
- atributi za kontrolu pozadine
- color, word-spacing, letter-spacing, line-height, vertical-align, box-shadow
::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.
- Mozilla Developer Network, Pseudo-elements
- Tuts+, The 30 CSS Selectors you Must Memorize
- TECH.pro, 7 Creative Uses of CSS 'content'