CSS: :before en :after pseudo elements in praktijk handleiding

Logo cursus traing wordpress

CSS: :before en :after pseudo elements in praktijk handleiding

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

Meer informatie over CSS: :before en :after pseudo elements in praktijk handleidingof info?

Wil je meer informatie? Veel bezoekers met interesse in CSS: :before en :after pseudo elements in praktijk handleiding bekeken ook de onderstaande handleidingen:


Scroll naar boven