Het ::after pseudo-element in CSS wordt gebruikt om inhoud aan het einde van een geselecteerd element in te voegen. Ondanks zijn naam wordt de gegenereerde inhoud niet echt na het element zelf ingevoegd, maar aan het einde van het element.
Het kan als volgt in CSS worden gebruikt:
1. Definieer het pseudo-element ::after voor het gekozen element. Bijvoorbeeld als je iets wilt invoegen na een paragraaf element (p), dan zou je “p::after” gebruiken.
1. Specificeer vervolgens de inhoud die je wilt toevoegen met de “content” eigenschap.
Bijvoorbeeld:
```
p::after {
content: “ – Vergeet dit niet!”;
}
```
In dit geval zou er aan het einde van elke paragraaf in je HTML-document “- Vergeet dit niet!” worden toegevoegd.
Belangrijke notities:
- Standaard wordt de content eigenschap ingesteld op “none”, wat betekent dat er geen inhoud wordt ingevoegd.
- Het content eigenschap kan tekst, afbeeldingen, quotes of counter value bevatten.
- Het is belangrijk om te weten dat de ::after pseudo-element niet op een element wordt toegepast als de content eigenschap leeg is.
- De gegenereerde inhoud is geen echt DOM-element. Je kunt het niet selecteren en er met JavaScript mee werken. Het wordt alleen gebruikt voor decoratieve doeleinden.
