CSS pseudo-elementen

Wat zijn pseudo-elementen?

Pseudo-elementen in CSS zijn speciale aanduidingen waarmee je een deel van een element kunt opmaken, zonder dat je de HTML hoeft aan te passen. Zo kun je bijvoorbeeld de eerste letter van een paragraaf stylen, extra decoratieve inhoud tonen vóór of na een element, of de markeringen van een lijst aanpassen.

Pseudo-elementen zijn dus handig wanneer je met CSS iets extra wilt tonen of opmaken, zonder extra HTML-elementen toe te voegen.

Voorbeelden van toepassingen

• De eerste letter van een paragraaf groter maken
• De eerste regel van een tekst apart stylen
• Decoratieve inhoud vóór of na een element tonen
• De bullets of nummers van een lijst aanpassen
• Geselecteerde tekst een andere kleur geven

Syntax van pseudo-elementen

selector::pseudo-element {
  property: value;
}

Sinds CSS3 is de schrijfwijze met :: de aanbevolen standaard. In oudere CSS-versies werd vaak één dubbele punt gebruikt (:). Die oude schrijfwijze werkt meestal nog, maar tegenwoordig gebruik je best de moderne notatie met ::.

Belangrijkste pseudo-elementen

::first-letter

Met ::first-letter kun je de eerste letter van een blok-element apart opmaken. Dit wordt vaak gebruikt voor een grote beginletter aan het begin van een tekst.

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Voorbeelden van bruikbare eigenschappen:

• font-size, font-family, font-weight
• color
• background
• margin, padding, border
• text-transform
• line-height

::first-line

Met ::first-line kun je de eerste regel van een blok-element een aparte stijl geven. Welke woorden precies op die eerste regel staan, hangt af van de breedte van het element.

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Voorbeelden van bruikbare eigenschappen:

• font-*
• color
• background
• word-spacing, letter-spacing
• text-decoration
• text-transform
• line-height

::before en ::after

Met ::before en ::after kun je gegenereerde content tonen vóór of na de inhoud van een element. Deze content wordt via CSS toegevoegd en staat dus niet echt in de HTML.

Voorbeeld met tekst:

blockquote::before {
  content: "“";
  font-size: 24px;
  margin-right: 8px;
}

blockquote::after {
  content: "”";
  font-size: 24px;
  margin-left: 8px;
}

Voorbeeld met een symbool:

a.external::after {
  content: " ↗";
}

Gebruik ::before en ::after vooral voor decoratieve of ondersteunende inhoud, niet voor belangrijke informatie die absoluut in de HTML moet staan.

::marker

Met ::marker kun je de bullets of nummers van lijstitems opmaken.

li::marker {
  color: red;
  font-size: 1.2rem;
}

::selection

Met ::selection kun je bepalen hoe geselecteerde tekst eruitziet wanneer een gebruiker tekst markeert.

::selection {
  color: red;
  background: yellow;
}

In de praktijk worden vooral color en background gebruikt.

Pseudo-elementen combineren met klassen

Je kunt pseudo-elementen ook combineren met een klasse, zodat de opmaak enkel geldt voor een specifieke groep elementen.

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Meerdere pseudo-elementen gebruiken

Je kunt op hetzelfde element verschillende pseudo-elementen toepassen.

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

In dit voorbeeld:

• de eerste letter wordt groter en rood weergegeven
• de eerste regel krijgt een blauwe kleur en kleine kapitalen

Belangrijk verschil met pseudo-klassen

Een pseudo-klasse selecteert een bepaalde toestand van een element, zoals :hover of :focus.

Een pseudo-element selecteert een deel van een element, zoals de eerste letter, de eerste regel of gegenereerde inhoud vóór of na het element.

Samenvatting

Pseudo-elementen maken het mogelijk om extra visuele verfijning toe te voegen met CSS, zonder extra HTML te schrijven. Ze helpen dus om je HTML proper te houden en je opmaak slim op te bouwen.