CSS :before en :after pseudo elements in de praktijk

De :before en :after zijn CSS pseudo elementen. Je kunt deze gebruiken om iets voor af na content van een element toe te voegen. In dit artikel geven we een paar voorbeelden van hoe deze te gebruiken.

Syntax

Stel we hebben de volgende simpele HTML code

paragraaf tekst

We kunnen nu een pseudo element gebruiken om tekst voor de paragraaf toe te voegen

p:before {
    content: "this is";
    font-weight: bold;
    font-style: italic;
}

Resultaat

Houd er rekening mee dat je hiermee iets aan de content toevoegt, en niet aan het element. 

Icons

Er wordt veel gebruik van :before en :after om een icoontje toe te voegen. Dit kan heel eenvoudig door de een icon als background te zetten. Een simpel voorbeeld van onze al eerder gebruikte HTML code. We breiden onze CSS nu uit tot onderstaande.

p:before {
    content: "";
    display: block;
    background: url("checked.gif") no-repeat;
    width: 14px;
    height: 14px;
    float: left;
    margin: 0 6px 0 0;
}

En zie daar, een image voor onze paragraaf.

Opmaak external links

Met bovenstaande kennis kunnen we dit gebruiken om bijvoorbeeld een verschil te maken tussen een interne en een externe link op onze website. Door voor elke externe link een image toe te voegen. We gebruiken als voorbeeld onderstaande HTML.

<p>De schrijver van dit artikel <a href="http://www.harmenschaap.nl">Harmen Schaap</a> heeft ook een eigen blog.</p>

Voor de CSS gebruiken we:

a {
    text-decoration: none;
    font-weight: bold;
    color: #000;
}
a:after {
    content: "";
    display: inline-block;
    background: url("icon-external.jpg") no-repeat top right;
    width: 14px;
    height: 12px;
}

Met hieronder het resulaat.