CSS: :before en :after pseudo elements
Per definitie zijn :before en :after CSS-pseudo-elementen. Je kunt ze gebruiken om iets voor of na de inhoud van een element in te voegen. Er zijn een aantal geweldige artikelen die de basisbeginselen beschrijven, maar ik wilde een blogpost schrijven voor de echte gebruiksscenario’s. Of in ieder geval om te laten zien waarvoor ik ze gebruik.
Syntaxis
Laten we zeggen dat we de volgende eenvoudige html-opmaak hebben:
<p>paragraph text</p>
We kunnen zo’n pseudo-element gebruiken:
p:before {
content: "Dit is";
font-weight: bold;
font-style: italic;
}
Houd er rekening mee dat u feitelijk een element vóór of na de inhoud toevoegt. Het is niet iets dat naast het geselecteerde element verschijnt, maar het is gerelateerd aan de inhoud ervan.
Icons en Pictogrammen
Het is erg populair om :before of :after te gebruiken voor het weergeven van een pictogram. Omdat u elke CSS-stijleigenschap kunt toevoegen, kunt u van het nieuw gemaakte element een blok één maken en een achtergrondafbeelding bijvoegen.
Nogmaals, we hebben dezelfde opmaak paragraaftekst en de volgende CSS:
p:before {
content: "";
display: block;
background: url("afbeelding.jpg") no-repeat;
width: 16px;
height: 16px;
float: left;
margin: 0 6px 0 0;
}