pseudoelementen

Pseudoelementen zijn een concept in CSS waarmee ontwerpers inhoud kunnen toevoegen of stijl geven aan een element zonder extra HTML-elementen te hoeven toevoegen. In tegenstelling tot pseudo-klassen richten ze zich op delen van het element zelf en worden ze meestal aangeroepen met de dubbele punt syntaxis ::before en ::after (voor compatibiliteit kunnen ook :before en :after gebruikt worden).

Pseudoelementen worden gerealiseerd door de content-eigenschap. Met content kun je tekst of een afbeelding invoegen of gegenereerde inhoud maken, zoals een decoratieve marker of een citaat. Een voorbeeld: p::before { content: "• "; color: red; } of blockquote::before { content: "“"; }. De gegenereerde inhoud verschijnt voor of na de inhoud van het geselecteerde element.

Ze kunnen veel CSS-eigenschappen verwerken, zoals color, font, margin, padding, display en positionering, waardoor ze nuttig zijn voor kleine, niet-destructieve toevoegingen aan de vormgeving. Ze laten je extra stijl toepassen zonder extra markup en zijn daarom vooral handig voor decoratieve accenten, citaten of iconen.

Beperkingen en toegankelijkheid: pseudo-elementen creëren elementen in de rendering tree, maar zijn geen onderdelen van het DOM en ze zijn meestal puur decoratief. Gebruik ze niet voor belangrijke inhoud of interactiviteit. Voor screen readers kan gegenereerde inhoud variërend worden behandeld, afhankelijk van context en hulpmiddelen, dus houd rekening met toegankelijkheid bij het gebruik van pseudo-elementen. In termen van ondersteuning: moderne browsers bieden brede ondersteuning voor ::before en ::after; oudere browsers kunnen de oudere syntaxis :before en :after vereisen.