Pseudo-elementi su jedan od naprednijih selektora koji su dostupni za upotrebu u CSS-u. Glavna svrha ovih selektora je stvoriti jedinstveni stil, bez mijenjanja HTML dokumenta koji se koristi za stvaranje osnovne strukture zadane web stranice.

Evo kako koristiti pseudo-elemente u CSS-u.

Uobičajeni pseudo-elementi

Opsežan je popis pseudo-elemenata koji su dostupni kako bi olakšali život web programeru. Neki od ovih pseudo-elemenata uključuju:

• Prije
• Nakon
• Pozadina
• Prvi red
• Prvo slovo

U određenim će se situacijama neki pseudo-elementi pokazati prikladnijima od drugih, ali ono što ostaje konstantno jest opća struktura za upotrebu bilo kojeg pseudo-elementa.

Primjer strukture pseudo-elemenata

selector:: pseudo-element {
/ * css kôd * /
} 

Iako možeš koristite HTML element kao selektor, preporučuje se da koristite klasu ili id ​​kako biste izbjegli ciljanje neželjenih elemenata u vašem izgledu. Element, stil ili podaci koje želite umetnuti na željeni položaj trebaju biti postavljeni između kovrčavih zagrada.

Pseudo-elementi prije i poslije najpopularniji su na popisu, a s obzirom na to da postoji mnogo praktičnih načina za njihovu upotrebu - nije teško shvatiti zašto.

Korištenje elementa Before Pseudo u CSS-u

Iako nije nemoguće, u CSS je teško preklopiti slike čitljivim tekstom. To je ponajviše zato što bi slika i tekst zauzimali isti položaj na web stranici.

To je relativno lako poslati sliku u pozadinu grupe teksta, ali kad je ta slika presvijetla, nastoji prevladati tekst koji se nalazi na njoj. U tim je slučajevima sljedeći korak pokušaj da se slika učini manje neprozirnom pomoću svojstva opacity.

Jedini je problem što će, budući da slika i tekst zauzimaju isti položaj, i tekst postati pomalo proziran.

Jedan od rijetkih učinkovitih načina rješavanja ovog problema je upotreba pseudo-elementa before.

Korištenje primjera Prije pseudo-elementa

.odredišna stranica{
/ * Raspoređuje tekst na prekrivaču slike * /
zaslon: flex;
flex-smjer: stupac;
justify-content: centar;
align-items: sredina;
poravnanje teksta: središte;
/ * postavlja stranicu da se prilagodi različitim veličinama zaslona * /
visina: 100vh;
}
.landingPage:: before {
sadržaj:'';
/ * uvozi sliku * /
pozadina: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
centar / poklopac bez ponavljanja;
/ * postavlja prekrivač na vrh slike * /
neprozirnost: 0,4;
/ * čini sliku vidljivom * /
položaj: apsolutni;
vrh: 0;
lijevo: 0;
širina: 100%;
visina: 100%;
}

Gornji kod stvoren je za upotrebu u skladu s dolje navedenom HTML odredišnom stranicom. Kao što je prikazano u gornjem kodu, pomoću pseudo-elementa before možemo ciljati sliku i koristiti svojstvo neprozirnosti na njoj prije nego što se slika kombinira s tekstom.

Korištenje pseudo-elementa Before


Ovo je rezultat korištenja pseudo-elementa before
za prekrivanje i sliku čitljivim tekstom.

To će rezultirati time da se prekrivač postavi na sliku, a čisti tekst prikaže na vrhu, kao što je prikazano na donjoj slici:

Korištenje After Pseudo-elementa u CSS-u

Praktična upotreba pseudo-elementa after je pomoć u stvaranju HTML obrasca. Većina obrazaca stvorena je s nizom polja koja zahtijevaju podatke za uspješno slanje obrasca.

Jedan od načina da se naznači da polje u obrascu zahtijeva podatke postavljanjem je zvjezdice nakon naljepnice za to polje. Pseudo-element after pruža praktičan način da to učinite.

Korištenje primjera After Pseudo-element

.required:: after {
sadržaj: '*';
boja: crvena;
} 

Umetanjem gornjeg koda u CSS odjeljak vašeg obrasca osigurat će se da će nakon svake oznake koja sadrži potrebnu klasu izravno crvena zvjezdica. Pseudo-element after je također praktičan u ovom primjeru jer pomaže odvojiti stil od strukture (što je uvijek idealno u razvoju softvera).

Svojstvo sadržaja

Kao što je prikazano u primjeru pseudo-elementa after, svojstvo content je alat koji se koristi za umetanje novog sadržaja na web stranicu. Ovo se svojstvo koristi samo s pseudo-elementima prije i poslije.

Važno je napomenuti da čak i ako nema raspoloživog sadržaja koji bi se mogao dodavati u svojstvo sadržaja (kao u prethodnom primjeru pseudo-elementa gore), i dalje ćete morati koristiti svojstvo sadržaja unutar parametara pseudo-elementa prije ili poslije kako biste ih natjerali da rade kao namijenjen.

Sada možete koristiti pseudo-elemente u CSS-u

U ovom ste članku naučili kako prepoznati i koristiti pseudo-elemente u svojim CSS programima. Upoznali ste se s pseudo-elementima prije i poslije i dobili praktične načine korištenja oba. Također ste mogli vidjeti zašto je svojstvo sadržaja neophodno za uspješnu upotrebu pseudo-elemenata prije i poslije.

10 jednostavnih primjera CSS koda koje možete naučiti u 10 minuta

Želite li znati više o korištenju CSS-a? Isprobajte ove osnovne primjere CSS koda za početak, a zatim ih primijenite na vlastitim web stranicama.

Pročitajte Dalje

O autoru