CSS ::before pseudo-element

Definitie en gebruik

CSS ::before Pseudo-elementen worden gebruikt om inhoud in te voegen voor de inhoud van een gespecificeerd element.

Gebruik content De eigenschap specificeert de inhoud die moet worden ingevoegd. De waarde van content kan zijn:

• String: content: "Hello world!";
• Afbeelding: content: url(myimage.jpg);
• Geen inhoud: content: none;
• Teller: content: counter(li);
• Aanhalingstekens: content: open-quote;
• Eigenschapswaarde: content: " (" attr(href) ")";

Tip:Let op, de ingevoegde inhoud bevindt zich nog steeds binnen het specifieke element. De ingevoegde inhoud wordt toegevoegd voor de andere inhoud binnen het element.

Gebruik ::after Voeg inhoud toe na de inhoud van een specifiek element.

Voorbeeld

Voorbeeld 1

Voeg een string toe voor de inhoud van elke <p> element:

p::before {
  content: "Lees dit: ";
}

Probeer het zelf

Voorbeeld 2

Voeg een string toe voor de inhoud van elke <p> element en stel de stijl van de ingevoegde inhoud in:

p::before {
  content: "Lees dit -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Probeer het zelf

CSS syntaxis

::before {
  css declarations;
}

Technische details

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die deze pseudo-element volledig ondersteunt aan.

Gerelateerde pagina's

Handleiding:CSS pseudo-element

Referentie:CSS ::after pseudo-element