Hoe voor en na pseudo-elementen in CSS te gebruiken

Hoe voor en na pseudo-elementen in CSS te gebruiken

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.



windows xp-thema voor windows 10

Veel voorkomende 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 */
}

Hoewel u een HTML-element als selector kunt gebruiken, is het raadzaam een ​​klasse of een id te gebruiken 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, moet 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 vooral omdat de afbeelding en de tekst dezelfde positie op een webpagina zouden innemen.



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

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



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

Het Before Pseudo-element voorbeeld gebruiken


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

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





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


Hierdoor wordt een overlay op de afbeelding geplaatst en wordt duidelijke tekst bovenaan weergegeven, zoals weergegeven in de onderstaande afbeelding:

Het After Pseudo-element gebruiken in CSS

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

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

Het After Pseudo-element voorbeeld gebruiken


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

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

beste films op amazon prime september 2018

De inhoudseigenschap

Zoals wordt getoond in het bovenstaande voorbeeld van een pseudo-element, is de eigenschap content de tool die 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 aan de eigenschap inhoud te worden toegevoegd (zoals in het voorbeeld van het pseudo-element voor hierboven), u nog steeds de eigenschap inhoud moet gebruiken binnen de parameters van de voor of na pseudo-element om ze te laten werken zoals bedoeld.

Nu kunt u pseudo-elementen gebruiken in CSS

In dit artikel heb je geleerd hoe je pseudo-elementen in je 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 eigenschap content nodig is voor het succesvolle gebruik van de voor en na pseudo-elementen.

Deel Deel Tweeten E-mail 10 eenvoudige voorbeelden van CSS-codes die u in 10 minuten kunt leren

Hulp nodig met CSS? Probeer deze standaard CSS-codevoorbeelden om mee te beginnen en pas ze vervolgens toe op uw eigen webpagina's.

Lees volgende Gerelateerde onderwerpen
  • Programmeren
  • Webdesign
  • CSS
Over de auteur Kadeisha Kean(21 artikelen gepubliceerd)

Kadeisha Kean is een full-stack softwareontwikkelaar en technisch/technologisch schrijver. Ze heeft het onmiskenbare vermogen om enkele van de meest complexe technologische concepten te vereenvoudigen; materiaal produceren dat gemakkelijk kan worden begrepen door elke nieuwe technologie-beginner. Ze is gepassioneerd door schrijven, interessante software ontwikkelen en de wereld rondreizen (via documentaires).

Meer van Kadeisha Kean

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren