Hvordan bruke før og etter pseudoelementer i CSS

Hvordan bruke før og etter pseudoelementer i CSS

Pseudo-elementer er en av de mer avanserte selektorene som er tilgjengelige for bruk i CSS. Hovedformålet bak disse velgerne er å lage unik styling, uten å endre HTML -dokumentet som brukes til å lage grunnstrukturen til en gitt nettside.





Slik bruker du pseudo-elementer i CSS.



hvordan du finner din hensikt i livet quiz

Vanlige Pseudo-elementer

Det er en omfattende liste over pseudo-elementer som er tilgjengelige for å gjøre livet til en webutvikler enklere. Noen av disse pseudo-elementene inkluderer:





  • Før
  • Etter
  • Bakgrunn
  • Første linje
  • Første bokstav

I spesifikke situasjoner vil noen pseudo-elementer vise seg å være mer egnet enn andre, men det eneste som forblir konstant er den generelle strukturen for bruk av et hvilket som helst pseudo-element.

Pseudo-elementer Struktureksempel


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

Selv om du kan bruke et HTML -element som velger, anbefales det at du bruker en klasse eller en id for å unngå å målrette mot utilsiktede elementer i oppsettet ditt. Elementet, stilen eller dataene du vil sette inn i ønsket posisjon, bør plasseres mellom de krøllete selene.



Før og etter pseudo-elementene er de mest populære på listen, og gitt at det er mange praktiske måter å bruke dem på-er det ikke vanskelig å se hvorfor.

Bruke Before Pseudo-elementet i CSS

Selv om det ikke er umulig, er det vanskelig å legge over bilder med lesbar tekst i CSS. Dette er mest fordi bildet og teksten ville innta samme posisjon på en webside.



Det er relativt enkelt å sende et bilde til bakgrunnen til en tekstgruppe , men når bildet er for lyst, har det en tendens til å overvelde teksten som er på toppen av det. I disse tilfellene er det neste trinnet å prøve å gjøre bildet mindre ugjennomsiktig ved hjelp av opacity -egenskapen.

Det eneste problemet er at siden bildet og teksten inntar samme posisjon, blir teksten også noe gjennomsiktig.



En av de få effektive måtene å løse dette problemet er ved å bruke før-pseudo-elementet.

Bruk eksempelet Pseudo-element før


.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%;
}

Koden ovenfor er opprettet for å brukes i samklang med HTML landingPage -klassen nedenfor. Som vist i koden ovenfor, kan vi ved å bruke før-pseudo-elementet målrette bildet og bruke opacitetsegenskapen på det før bildet kombineres med teksten.





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


Dette vil resultere i at et overlegg plasseres på bildet og klar tekst vises på toppen, som vist på bildet nedenfor:

Bruke After Pseudo-elementet i CSS

En praktisk bruk for etter-pseudo-elementet er å hjelpe til med å lage et HTML-skjema. De fleste skjemaer er opprettet med et sett med felt som krever data for at skjemaet skal sendes inn.

En måte å indikere at et felt i et skjema krever data er ved å plassere en stjerne etter etiketten for dette feltet. Etter-pseudo-elementet gir deg en praktisk måte å gjøre dette på.

Bruke After Pseudo-element Eksempel


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

Hvis du setter inn koden ovenfor i CSS -delen av skjemaet ditt, vil du sikre at hver etikett som inneholder den nødvendige klassen, blir direkte etterfulgt av en rød stjerne. Etter-pseudo-elementet er også praktisk i dette eksemplet fordi det hjelper å skille styling fra struktur (som alltid er ideelt i programvareutvikling.)

hvordan dele en spotify -spilleliste

Innholdseiendommen

Som vist i eksempelet etter pseudo-elementet ovenfor, er innholdsegenskapen verktøyet som brukes til å sette inn nytt innhold på en webside. Denne egenskapen brukes bare med før og etter pseudoelementene.

Det er viktig å merke seg at selv om det ikke er noe innhold tilgjengelig for å mates til innholdsegenskapen (for eksempel i eksempelet før-pseudo-elementet ovenfor), må du fortsatt bruke innholdsegenskapen innenfor parametrene til før eller etter pseudo-element for å få dem til å fungere etter hensikten.

Nå kan du bruke Pseudo-elementer i CSS

I denne artikkelen lærte du hvordan du identifiserer og bruker pseudo-elementer i CSS-programmene dine. Du ble introdusert for før og etter pseudoelementene og fikk praktiske måter å bruke begge deler på. Du var også i stand til å se hvorfor innholdsegenskapen er nødvendig for vellykket bruk av før og etter pseudo-elementer.

Dele Dele kvitring E -post 10 enkle CSS -kodeeksempler du kan lære på 10 minutter

Trenger du hjelp med CSS? Prøv disse grunnleggende CSS -kodeeksemplene til å begynne med, og bruk dem deretter på dine egne websider.

Les neste Relaterte temaer
  • Programmering
  • Webdesign
  • CSS
Om forfatteren Kadeisha Kean(21 artikler publisert)

Kadeisha Kean er en fullstabel programvareutvikler og teknisk/teknologisk skribent. Hun har den særegne evnen til å forenkle noen av de mest komplekse teknologiske konseptene; produsere materiale som lett kan forstås av enhver nybegynner innen teknologi. Hun brenner for å skrive, utvikle interessant programvare og reise verden rundt (gjennom dokumentarer).

Mer fra Kadeisha Kean

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere