Het ::before pseudo-element in CSS wordt gebruikt om inhoud in te voegen vóór de geselecteerde elementen. Het wordt vaak gebruikt voor het toevoegen van decoratieve inhoud.
Dit is hoe je het zou kunnen gebruiken:
Eerst specificeer je het element waar je iets voor wilt plaatsen, dan gebruik je het ::before pseudo-element.
```
p::before {
content: “Lees dit:”;
}
```
In dit voorbeeld zal elke paragraaf (p) in je HTML nu beginnen met “Lees dit:”.
Enkele belangrijke dingen om te onthouden over het ::before pseudo-element:
- De `content` eigenschap is vereist; zonder deze zal het ::before pseudo-element geen effect hebben.
- De standaardwaarde van de `display` eigenschap voor het ::before pseudo-element is “inline”.
- Net als bij andere elementen, kun je stijlen zoals `color`, `font-size`, `background-color`, enz. toepassen op een ::before pseudo-element.
- ::before pseudo-elementen worden als kind-elementen van het geselecteerde element beschouwd in de DOM structuur. Dit betekent dat ze de styles van het parent element kunnen erven.
- ::before pseudo-elementen kunnen niet op zichzelf staan – ze hebben een parent element nodig.
Dit pseudo-element kan zeer nuttig zijn voor het toevoegen van decoratieve afbeeldingen, iconen, citaten en andere dergelijke details aan je webpagina’s zonder dat je extra HTML-elementen in je markup hoeft op te nemen. Het kan ook handig zijn voor bepaalde soorten layout-trucs.
