Sådan bruges før og efter pseudoelementer i CSS

Sådan bruges før og efter pseudoelementer i CSS

Pseudo-elementer er en af ​​de mere avancerede selektorer, der er tilgængelige til brug i CSS. Hovedformålet bag disse vælgere er at skabe unik styling uden at ændre HTML -dokumentet, der bruges til at skabe grundstrukturen for en given webside.





Sådan bruges pseudo-elementer i CSS.



hvordan man laver fotokollager på facebook

Almindelige Pseudo-elementer

Der er en omfattende liste over pseudo-elementer, der er tilgængelige for at gøre livet for en webudvikler lettere. Nogle af disse pseudo-elementer inkluderer:





  • Før
  • Efter
  • Bagtæppe
  • Første linje
  • Første bogstav

I specifikke situationer vil nogle pseudo-elementer vise sig at være mere egnede end andre, men den eneste ting, der forbliver konstant, er den generelle struktur for brug af ethvert pseudo-element.

Pseudo-elementer Struktureksempel


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

Selvom du kan bruge et HTML -element som vælger, anbefales det, at du bruger en klasse eller et id for at undgå at målrette mod utilsigtede elementer i dit layout. Elementet, stilen eller dataene, som du gerne vil indsætte på den ønskede position, skal placeres mellem de krøllede seler.



Før og efter pseudo-elementer er de mest populære på listen, og da der er mange praktiske måder at bruge dem på-er det ikke svært at se hvorfor.

Brug af Before Pseudo-elementet i CSS

Selvom det ikke er umuligt, er det svært at overlejre billeder med læsbar tekst i CSS. Dette er mest fordi billedet og teksten ville indtage den samme position på en webside.



Det er relativt let at sende et billede til baggrunden for en tekstgruppe , men når billedet er for lyst, har det en tendens til at overvælde teksten, der er oven på det. I disse tilfælde er det næste trin at forsøge at gøre billedet mindre uigennemsigtigt ved hjælp af opacity -egenskaben.

Det eneste problem er, at da billedet og teksten indtager samme position, bliver teksten også noget gennemsigtig.



En af de få effektive måder at løse dette problem på er ved at bruge før-pseudo-elementet.

Brug af eksemplet Before Pseudo-element


.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 oprettet for at blive brugt i fællesskab med klassen HTML landingPage nedenfor. Som vist i koden ovenfor, kan vi ved hjælp af før-pseudo-elementet målrette billedet og bruge opacitetsegenskaben på det, før billedet 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 der placeres et overlay på billedet, og klar tekst vises øverst, som vist på billedet herunder:

Brug af After Pseudo-elementet i CSS

En praktisk anvendelse til efter-pseudo-elementet er at hjælpe med oprettelsen af ​​en HTML-formular. De fleste formularer oprettes med et sæt felter, der kræver data for at formularen kan indsendes med succes.

En måde at angive, at et felt i en form kræver data, er ved at placere en stjerne efter etiketten for dette felt. Efter-pseudo-elementet giver dig en praktisk måde at gøre dette på.

Brug af eksempelet After Pseudo-element


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

Ved at indsætte koden ovenfor i CSS -sektionen i din formular sikres det, at hver etiket, der indeholder den krævede klasse, efterfølges direkte af en rød stjerne. Efter-pseudo-elementet er også praktisk i dette eksempel, fordi det hjælper med at adskille styling fra struktur (hvilket altid er ideelt i softwareudvikling.)

installer windows 10 fra usb -drev

Indholdsejendommen

Som det er vist i eksemplet efter pseudo-element ovenfor, er egenskaben indhold det værktøj, der bruges til at indsætte nyt indhold på en webside. Denne egenskab bruges kun med før og efter pseudo-elementer.

Det er vigtigt at bemærke, at selvom der ikke er noget indhold, der kan feedes til indholdsejendommen (f.eks. I eksemplet med tidligere pseudo-element ovenfor), skal du stadig bruge indholdsejendommen inden for parametrene for før eller efter pseudo-element for at få dem til at fungere efter hensigten.

Nu kan du bruge Pseudo-elementer i CSS

I denne artikel lærte du, hvordan du identificerer og bruger pseudo-elementer i dine CSS-programmer. Du blev introduceret til før og efter pseudo-elementer og fik praktiske måder at bruge begge dele på. Du kunne også se, hvorfor indholdsejendommen er nødvendig for en vellykket brug af før og efter pseudo-elementer.

Del Del Tweet E -mail 10 simple CSS -kodeeksempler, du kan lære på 10 minutter

Brug for hjælp til CSS? Prøv disse grundlæggende CSS -kodeeksempler til at starte med, og anvend dem derefter på dine egne websider.

Læs Næste Relaterede emner
  • Programmering
  • Webdesign
  • CSS
Om forfatteren Kadeisha Kean(21 artikler udgivet)

Kadeisha Kean er en softwareudvikler i fuld stak og teknisk/teknologisk forfatter. Hun har den særlige evne til at forenkle nogle af de mest komplekse teknologiske begreber; producerer materiale, der let kan forstås af enhver nybegynder i teknologi. Hun brænder for at skrive, udvikle interessant software og rejse rundt i verden (gennem dokumentarfilm).

Mere fra Kadeisha Kean

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere