CSS :before en :after pseudo elementen in de praktijk

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

paragraaf tekst

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.

paragraaf tekst

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 meest gebruikte zoekmachine is <a href="https://google.com">Google</a>, Probeer het hier</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.

De meest gebruikte zoekmachine is Google, Probeer het hier