CSS ::before pseudo-element

Definition og brug

CSS ::before Pseudo-elementer bruges til at indsætte indhold før det specificerede elements indhold.

Brug content Egenskabsværdi: content: " (" attr(href) ")";

• Streng: content: "Hello world!";
• Billede: content: url(myimage.jpg);
• Ingen indhold: content: none;
• Tæller: content: counter(li);
• Citat: content: open-quote;
• Attributværdi: content: " (" attr(href) ")";

Tip:Bemærk, at det indsatte indhold stadig ligger inden for det specificerede element. Det indsatte indhold tilføjes før det øvrige indhold i elementet.

Brug ::after Indsæt noget indhold efter indholdet af en bestemt element.

Eksempel

Eksempel 1

Indsæt en streng før indholdet af hver <p>-element:

p::before {
  content: "Læs dette: ";
}

Prøv det selv

Eksempel 2

Indsæt en streng før indholdet af hver <p>-element og angiv stilen for den indsatte indhold:

p::before {
  content: "Læs dette -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Prøv det selv

CSS syntaks

::before {
  css deklarationer;
}

Tekniske detaljer

Browser-understøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter dette pseudo-element.

Relaterede sider

Tutorial:CSS pseudo-element

Kilde:CSS ::after pseudo-element