Psevdoelementi so eden naprednejših izbirnikov, ki so na voljo za uporabo v CSS. Glavni namen teh izbirnikov je ustvariti edinstven slog brez spreminjanja dokumenta HTML, ki se uporablja za ustvarjanje osnovne strukture dane spletne strani.

Tukaj je opisano, kako uporabljati psevdoelemente v CSS.

Pogosti psevdoelementi

Za lažje življenje spletnega razvijalca je na voljo obsežen seznam psevdoelementov. Nekateri od teh psevdoelementov vključujejo:

• Prej
• Po
• Ozadje
• Prva vrsta
• Prvo pismo

V določenih situacijah se bodo nekateri psevdoelementi izkazali za primernejše od drugih, toda ena stvar, ki ostane nespremenjena, je splošna struktura za uporabo katerega koli psevdoelementa.

Primer strukture psevdo-elementov

selector:: pseudo-element {
/ * css koda * /
} 

Čeprav lahko uporabite element HTML kot izbirnik, je priporočljivo, da uporabite razred ali ID, da se izognete ciljanju na nenamerne elemente v postavitvi. Element, slog ali podatke, ki jih želite vstaviti na želeni položaj, je treba postaviti med zavite oklepaje.

Na seznamu so najbolj priljubljeni psevdoelementi pred in po, in ker obstaja veliko praktičnih načinov njihove uporabe, ni težko razumeti, zakaj.

Uporaba elementa Before Pseudo v CSS

Čeprav ni nemogoče, je v CSS težko prekrivati ​​slike z berljivim besedilom. To je predvsem zato, ker bi imela slika in besedilo enak položaj na spletni strani.

To je razmeroma enostavno pošlji sliko na ozadje skupine besedila, toda kadar je slika presvetla, ponavadi preglasi besedilo, ki je na njej. V teh primerih je naslednji korak poskusiti sliko narediti manj neprozorno z uporabo lastnosti neprosojnosti.

Težava je le v tem, da bosta slika in besedilo v istem položaju tudi besedilo postali nekoliko pregledni.

Eden redkih učinkovitih načinov za rešitev te težave je uporaba psevdo-elementa before.

Uporaba primera Pred psevdo-elementom

.Ciljna stran{
/ * Razporeja besedilo na prosojnici slike * /
zaslon: flex;
smer upogiba: stolpec;
justify-content: center;
align-items: center;
poravnava besedila: sredina;
/ * nastavi stran, da se prilagodi različnim velikostim zaslona * /
višina: 100vh;
}
.landingPage:: pred {
vsebina: '';
/ * uvozi sliko * /
ozadje: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
center / pokrov brez ponavljanja;
/ * postavi prosojnico na vrh slike * /
motnost: 0,4;
/ * naredi sliko vidno * /
položaj: absolutno;
zgoraj: 0;
levo: 0;
širina: 100%;
višina: 100%;
}

Zgornja koda je ustvarjena za uporabo v sozvočju s spodnjim razredom HTML landingPage. Kot je prikazano v zgornji kodi, lahko z uporabo psevdo-elementa before ciljno usmerimo sliko in na njej uporabimo lastnost neprosojnosti, preden se slika kombinira z besedilom.

Uporaba psevdo-elementa Before


To je rezultat uporabe psevdo-elementa before
za prekrivanje in sliko z berljivim besedilom.

To bo povzročilo, da bo na sliko postavljen prosojnik, na vrhu pa bo prikazano jasno besedilo, kot je prikazano na spodnji sliki:

Uporaba elementa After Pseudo v CSS

Praktična uporaba psevdoelementa after je pomoč pri ustvarjanju obrazca HTML. Večina obrazcev je ustvarjenih z naborom polj, ki zahtevajo podatke za uspešno oddajo obrazca.

Eden od načinov, da označite, da polje v obrazcu zahteva podatke, je postavitev zvezdice za oznako za to polje. Psevdo-element after ponuja praktičen način za to.

Uporaba primera After Pseudo-element

.required:: po {
vsebina: '*';
barva: rdeča;
} 

Če vstavite zgornjo kodo v odsek CSS vašega obrazca, bo zagotovo sledilo vsaki oznaki, ki vsebuje zahtevani razred, rdeča zvezdica. V tem primeru je praktičen tudi psevdo-element after, ker pomaga ločiti slog od strukture (kar je vedno idealno pri razvoju programske opreme.)

Lastnost vsebine

Kot je prikazano v zgornjem primeru psevdo-elementa zgoraj, je lastnost vsebine orodje, ki se uporablja za vstavljanje nove vsebine na spletno stran. Ta lastnost se uporablja samo s psevdoelementi pred in po.

Pomembno je vedeti, da tudi če ni na voljo vsebine, ki bi bila podana v lastnost vsebine (na primer v prejšnjem primeru psevdoelementa zgoraj), boste še vedno morali uporabiti lastnost vsebine znotraj parametrov psevdoelementa pred ali po, da bodo lahko delovali kot predvidena.

Zdaj lahko v CSS uporabljate psevdoelemente

V tem članku ste izvedeli, kako prepoznati in uporabljati psevdoelemente v svojih programih CSS. Predstavili ste se psevdoelementom pred in po ter dobili praktične načine uporabe obeh. Prav tako ste lahko videli, zakaj je lastnost vsebine potrebna za uspešno uporabo psevdoelementov pred in po.

10 preprostih primerov kode CSS, ki se jih lahko naučite v 10 minutah

Bi radi izvedeli več o uporabi CSS? Za začetek poskusite s temi osnovnimi primeri kode CSS, nato jih uporabite na svojih spletnih straneh.

Preberite Naprej

O avtorju