Inhoud met ::before en ::after
Voeg gegenereerde inhoud voor of na elementen in met ::before en ::after en de eigenschap content.
Inhoud met ::before en ::after is een gratis CSS Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Wat zijn pseudo-elementen?
Pseudo-elementen maken virtuele elementen die worden opgemaakt alsof ze deel uitmaken van de DOM. Ze gebruiken dubbele dubbele punten ::. De meest gebruikte zijn ::before en ::after.
::before en ::after
::before voegt gegenereerde inhoud vóór de inhoud van een element in. ::after voegt deze erna in. Voor beide is de eigenschap content vereist om ze weer te geven.
<span class="element">Text with generated content</span>De eigenschap content
De eigenschap content accepteert:
- Een tekenreeks:
content: "text" - Een lege tekenreeks:
content: ""(gebruikelijk voor decoratieve vormen) - Een URL:
content: url("icon.svg") - Een teller:
content: counter(step) - attr():
content: attr(data-tooltip)
Decoratieve aanhalingstekens
Voeg typografische aanhalingstekens toe zonder ze aan HTML toe te voegen:
<blockquote>Design is not just what it looks like — design is how it works.</blockquote>Vormen met lege content
Met content: "", een positie en afmetingen maak je decoratieve vormen zonder extra HTML:
<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>Floats opruimen met ::after
De klassieke clearfix gebruikt ::after om floats te wissen zonder extra opmaak:
<div class="clearfix" style="border:1px solid #ccc;">
<div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>Tooltip met ::after
Een tooltip die alleen CSS gebruikt, met ::after en attr():
<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>Pictogram met content: url()
Voeg vóór koppelingen een klein pictogram toe met content: url():
<a href="https://example.com" target="_blank" rel="noopener">External link</a>Beperkingen van pseudo-elementen
Pseudo-elementen staan niet in de DOM. Ze zijn:
- Niet door gebruikers te selecteren of te doorzoeken
- Standaard niet toegankelijk voor schermlezers
- Niet rechtstreeks aan te spreken met JavaScript
Zet nooit essentiële inhoud in gegenereerde inhoud — gebruik pseudo-elementen alleen voor decoratie.
Eén dubbelepunt versus twee dubbelepunten
Een enkele dubbelepunt (:before) was de syntaxis van CSS2. Twee dubbelepunten (::before) zijn de CSS3-standaard, die pseudo-elementen onderscheidt van pseudo-klassen. Beide werken in moderne browsers, maar gebruik voor nieuwe code twee dubbelepunten.
Welke elementen ::before/::after ondersteunen
Vervangen elementen (img, input, select, video) kunnen geen pseudo-elementen hebben, omdat ze geen inhoudsgebied hebben waarin iets kan worden ingevoegd. Gebruik in plaats daarvan een omvattend element voor decoratie.
Korte controle
Welke waarde van content is vereist voor een decoratief pseudo-element ::before zonder zichtbare tekst?
Samenvatting
::before en ::after voegen gegenereerde inhoud toe vóór en na de echte inhoud van een element. De eigenschap content is vereist. Gebruik ze voor decoratieve vormen, pictogrammen, aanhalingstekens en tooltips — maar nooit voor betekenisvolle inhoud die gebruikers moeten kunnen bereiken of lezen.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Inhoud met ::before en ::after” gratis?
Ja — de volledige tekst van “Inhoud met ::before en ::after” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Inhoud met ::before en ::after”?
Voeg gegenereerde inhoud voor of na elementen in met ::before en ::after en de eigenschap content. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Inhoud met ::before en ::after”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Inhoud met ::before en ::after
- ::placeholder ::selection en ::marker
- CSS-tellers met ::before
- Decoratieve patronen met pseudo-elementen