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.
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;
}
Houd er rekening mee dat je hiermee iets aan de content toevoegt, en niet aan het element.
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.
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.