Pseudo-elementen zijn een van de meer geavanceerde selectors die beschikbaar zijn voor gebruik in CSS. Het belangrijkste doel achter deze selectors is om een ​​unieke stijl te creëren, zonder het HTML-document te wijzigen dat wordt gebruikt om de basisstructuur van een bepaalde webpagina te creëren.

Hier leest u hoe u pseudo-elementen in CSS gebruikt.

Veelvoorkomende pseudo-elementen

Er is een uitgebreide lijst met pseudo-elementen die beschikbaar zijn om het leven van een webontwikkelaar gemakkelijker te maken. Enkele van deze pseudo-elementen zijn:

• Voordat
• Na
• Achtergrond
• Eerste lijn
• Eerste brief

In specifieke situaties zullen sommige pseudo-elementen geschikter blijken te zijn dan andere, maar het enige dat constant blijft, is de algemene structuur voor het gebruik van elk pseudo-element.

Pseudo-elementen Structuur Voorbeeld

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

Maar je kunt het wel gebruik een HTML-element als selector, wordt aanbevolen dat u een klasse of een id gebruikt om te voorkomen dat u zich op onbedoelde elementen in uw lay-out richt. Het element, de stijl of de gegevens die u op de gewenste positie wilt invoegen, moeten tussen de accolades worden geplaatst.

De pseudo-elementen voor en na zijn het populairst in de lijst, en aangezien er veel praktische manieren zijn om ze te gebruiken, is het niet moeilijk te begrijpen waarom.

Het Before Pseudo-element gebruiken in CSS

Hoewel het niet onmogelijk is, is het moeilijk om afbeeldingen te overlappen met leesbare tekst in CSS. Dit komt voornamelijk doordat de afbeelding en de tekst op een webpagina dezelfde positie zouden innemen.

Het is relatief eenvoudig stuur een afbeelding naar de achtergrond van een groep tekst, maar als dat beeld te helder is, heeft het de neiging de tekst erop te overweldigen. In deze gevallen is de volgende stap om te proberen de afbeelding minder ondoorzichtig te maken met behulp van de ondoorzichtigheidseigenschap.

Het enige probleem is dat aangezien de afbeelding en de tekst dezelfde positie innemen, de tekst ook enigszins transparant zal worden.

Een van de weinige effectieve manieren om dit probleem op te lossen, is door het pseudo-element before te gebruiken.

Met behulp van het Before Pseudo-element Example

.landingPage {
/ * Schikt de tekst op de beeldoverlay * /
weergave: flex;
flex-richting: kolom;
justify-content: center;
align-items: center;
text-align: center;
/ * stelt de pagina in om aan te passen aan verschillende schermformaten * /
hoogte: 100vh;
}
.landingPage:: before {
inhoud:'';
/ * importeert een afbeelding * /
achtergrond: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
geen herhaling midden / omslag;
/ * plaatst een overlay bovenop de afbeelding * /
ondoorzichtigheid: 0,4;
/ * maakt de afbeelding zichtbaar * /
positie: absoluut;
boven: 0;
links: 0;
breedte: 100%;
hoogte: 100%;
}

De bovenstaande code is gemaakt om te worden gebruikt in combinatie met de HTML-klasse landingPage hieronder. Zoals getoond in de bovenstaande code, kunnen we door het before pseudo-element te gebruiken de afbeelding targeten en de ondoorzichtigheidseigenschap erop gebruiken voordat de afbeelding wordt gecombineerd met de tekst.

Met behulp van het Before pseudo-element


Dit is het resultaat van het gebruik van het pseudo-element before
overlay en afbeelding met leesbare tekst.

Dit zal resulteren in een overlay die over de afbeelding wordt geplaatst en duidelijke tekst bovenaan wordt weergegeven, zoals weergegeven in de onderstaande afbeelding:

Het After Pseudo-element gebruiken in CSS

Een praktisch gebruik voor het after pseudo-element is om te helpen bij het maken van een HTML-formulier. De meeste formulieren worden gemaakt met een set velden die gegevens nodig hebben om het formulier met succes te kunnen verzenden.

Een manier om aan te geven dat een veld in een formulier gegevens nodig heeft, is door een asterisk achter het label voor dit veld te plaatsen. Het after pseudo-element biedt een praktische manier om dit te doen.

Met behulp van het After Pseudo-element Example

.vereist: na {
inhoud: '*';
kleur rood;
} 

Als u de bovenstaande code invoegt in het CSS-gedeelte van uw formulier, zorgt u ervoor dat elk label dat de vereiste klasse bevat, direct wordt gevolgd door een rode asterisk. Het after-pseudo-element is in dit voorbeeld ook praktisch omdat het helpt om stijl en structuur te scheiden (wat altijd ideaal is bij softwareontwikkeling.)

De inhoudseigenschap

Zoals te zien is in het voorbeeld na het pseudo-element hierboven, is de eigenschap content het hulpmiddel dat wordt gebruikt om nieuwe inhoud op een webpagina in te voegen. Deze eigenschap wordt alleen gebruikt met de voor en na pseudo-elementen.

Het is belangrijk op te merken dat zelfs als er geen inhoud beschikbaar is om te worden ingevoerd naar de inhoudseigenschap (zoals in het voorafgaande pseudo-element voorbeeld hierboven), moet u nog steeds de eigenschap content gebruiken binnen de parameters van het pseudo-element voor of na om ze te laten werken als bedoeld.

Nu kunt u pseudo-elementen gebruiken in CSS

In dit artikel hebt u geleerd hoe u pseudo-elementen in uw CSS-programma's kunt identificeren en gebruiken. Je maakte kennis met de voor en na pseudo-elementen en kreeg praktische manieren om beide te gebruiken. Je kon ook zien waarom de content-eigenschap nodig is voor het succesvol gebruik van de voor en na pseudo-elementen.

10 eenvoudige CSS-codevoorbeelden die u in 10 minuten kunt leren

Meer weten over het gebruik van CSS? Probeer deze standaard CSS-codevoorbeelden om mee te beginnen, en pas ze vervolgens toe op uw eigen webpagina's.

Lees Volgende

Over de auteur