CSS ::before pseudoelement

Definitie en gebruik

CSS ::before Pseudoelementen worden gebruikt om inhoud in te voegen voor de inhoud van een specifieke 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 de specifieke elementen. De ingevoegde inhoud wordt toegevoegd voor de andere inhoud binnen het element.

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

Voorbeeld

Voorbeeld 1

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

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

Probeer het zelf

Voorbeeld 2

Voeg een string in 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 declaraties;
}

Technische details

Browserondersteuning

De cijfers in de tabel specificeren de eerste browserversie die het pseudoelement volledig ondersteunt.

Gerelateerde pagina's

Handleiding:CSS pseudoelement

Referentie:CSS ::after pseudoelement