Kako koristiti pseudo elemente prije i poslije u CSS -u

Kako koristiti pseudo elemente prije i poslije u CSS -u

Pseudo-elementi su jedan od naprednijih birača koji su dostupni za upotrebu u CSS-u. Glavna svrha ovih birača je stvaranje jedinstvenog stila, bez mijenjanja HTML dokumenta koji se koristi za stvaranje osnovne strukture zadane web stranice.





Evo kako koristiti pseudo-elemente u CSS-u.



besplatno streaming filmova bez registracije

Uobičajeni pseudo-elementi

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





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

U posebnim situacijama neki će se pseudoelementi pokazati prikladnijima od drugih, ali jedino što ostaje konstantno je opća struktura za korištenje bilo kojeg pseudo-elementa.

Primjer strukture pseudoelemenata


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

Iako možete koristiti HTML element kao birač, preporučuje se upotreba klase ili id ​​-a kako biste izbjegli ciljanje nenamjernih elemenata u svom izgledu. Element, stil ili podatke koje želite umetnuti na željenu poziciju trebali biste postaviti 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 njihove uporabe-nije teško shvatiti zašto.

Korištenje Pseudo-elementa Prije u CSS-u

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



Relativno je lako to učiniti poslati sliku u pozadinu grupe teksta , ali kad je ta slika presvijetla, ima tendenciju preopteretiti tekst koji se nalazi na njoj. U tim je slučajevima sljedeći korak pokušaj učiniti sliku manje neprozirnom pomoću svojstva neprozirnosti.

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



Jedan od rijetkih učinkovitih načina za rješavanje ovog problema je korištenje pseudo-elementa before.

Koristeći primjer Pseudo-element Prije


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Gornji kôd kreiran je za upotrebu u skladu s donjom klasom HTML destinationPage. 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.





This is the result of using the before pseudo-element
to overlay and image with readable text.


To će rezultirati postavljanjem sloja na sliku i jasnim tekstom na vrhu, kao što je prikazano na donjoj slici:

Korištenje After Pseudo-elementa u CSS-u

Praktična upotreba za pseudo-element after je pomoć u stvaranju HTML obrasca. Većina obrazaca izrađena je sa skupom polja koja zahtijevaju podatke za uspješno slanje obrasca.

Jedan od načina da označite da polje u obrascu zahtijeva podatke jest postavljanje zvjezdice iza oznake za ovo polje. Pseudo-element after nudi vam praktičan način da to učinite.

Koristeći Primjer pseudo-elemenata After


.required::after{
content: '*';
color: red;
}

Umetanjem gornjeg koda u CSS odjeljak vašeg obrasca osigurat će se da će svaka oznaka koja sadrži potrebnu klasu biti izravno praćena crvenom zvjezdicom. Pseudo-element after također je praktičan u ovom primjeru jer pomaže odvojiti styling od strukture (što je uvijek idealno u razvoju softvera.)

kako se pojavljujete offline na facebooku

Svojstvo sadržaja

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

Važno je napomenuti da čak i ako nema dostupnog sadržaja za unos u svojstvo sadržaja (kao što je u prethodnom primjeru pseudo-elementa gore), i dalje morate koristiti svojstvo sadržaja unutar parametara prije ili poslije pseudo-element kako bi ih natjerali da rade kako je predviđeno.

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

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

Udio Udio Cvrkut E -pošta 10 jednostavnih primjera CSS koda koje možete naučiti za 10 minuta

Trebate pomoć s CSS -om? Za početak isprobajte ove osnovne primjere CSS koda, a zatim ih primijenite na vlastite web stranice.

Pročitajte Dalje Povezane teme
  • Programiranje
  • Web dizajn
  • CSS
O autoru Kadeisha Kean(Objavljen 21 članak)

Kadeisha Kean je programer softvera i pisac tehničke/tehnologije. Ona ima izrazitu sposobnost pojednostavljivanja nekih od najsloženijih tehnoloških koncepata; proizvodnju materijala koji može lako razumjeti svaki početnik u tehnologiji. Oduševljena je pisanjem, razvojem zanimljivog softvera i putovanjem po svijetu (kroz dokumentarne filmove).

Više od Kadeishe Kean

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu