CSS Pseudo-elementen – Volledige Gids

Wat zijn pseudo-elementen?

Pseudo-elementen in CSS zijn krachtige hulpmiddelen waarmee je specifieke delen van HTML-elementen kunt opmaken, zonder de daadwerkelijke HTML-structuur aan te passen. Dit maakt het mogelijk om subtiele of geavanceerde stijlaanpassingen te doen op basis van onderdelen van een element, zoals de eerste letter, eerste regel, of zelfs de markers van een lijst.

Voorbeelden van toepassingen:

• De eerste letter of regel van een tekst opmaken
• Inhoud vóór of na een element invoegen
• Markeringen van lijstitems stijlen
• Geselecteerde tekst een unieke stijl geven
• Decoratieve elementen toevoegen (zoals iconen of aanhalingstekens)

Syntax van pseudo-elementen

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

Opmerking: In CSS2 en CSS1 werd vaak de enkele dubbele punt : gebruikt. Voor achterwaartse compatibiliteit wordt dit nog steeds ondersteund, maar :: is de aanbevolen standaard sinds CSS3.

Belangrijkste pseudo-elementen in CSS

::first-letter

Wordt gebruikt om de eerste letter van een blok-element apart te stijlen.

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

Eigenschappen die kunnen worden toegepast:

• font-*
• color
• background
• margin, padding, border
• text-decoration
• text-transform
• vertical-align (alleen indien float: none)
• float, clear
• line-height

::first-line

Wordt gebruikt om de eerste regel van een blok-element te stylen.

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

Eigenschappen die kunnen worden toegepast:

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

::before en ::after

Deze pseudo-elementen voegen virtuele content toe vóór of na de inhoud van een element.

Voorbeeld met tekst:

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

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

Voorbeeld met afbeelding:

h1::before {
  content: url(smiley.gif);
}

h1::after {
  content: url(smiley.gif);
}

::marker

Wordt gebruikt om de bulletpoints of nummering van lijstitems te stylen.

::marker {
  color: red;
  font-size: 23px;
}

::selection

Hiermee kun je de stijl van geselecteerde tekst aanpassen wanneer een gebruiker tekst markeert.

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

Ondersteunde eigenschappen:

• color
• background
• cursor
• outline

Combineren met klassen

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

Meerdere pseudo-elementen combineren

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

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

In dit voorbeeld:

• De eerste letter krijgt een opvallende rode kleur en grote grootte
• De eerste regel van de paragraaf wordt blauw en in kleine kapitalen getoond

Samenvatting

Pseudo-elementen zijn essentieel voor een nette, gescheiden opmaaklaag in moderne webdesign. Ze verbeteren de gebruikerservaring en houden de HTML schoon.