CSS ::before pseudo-element

Definisjon og bruk

CSS ::before Pseudo-elementer brukes til å sette inn innhold før innholdet i det angitte elementet.

Bruk content Egenskapen spesifiserer innholdet som skal settes inn. content-verdien kan være:

• Streng: content: "Hello world!";
• Bilde: content: url(myimage.jpg);
• Ingen innhold: content: none;
• Teller: content: counter(li);
• Citat: content: open-quote;
• Attributtverdi: content: " (" attr(href) ")";

Tips:Bemerk: Innholdet som settes inn er fortsatt inne i det angitte elementet. Innholdet legges til før annet innhold inne i elementet.

Bruk ::after Sett inn innhold etter innholdet i et bestemt element.

Eksempel

Eksempel 1

Sett inn en streng før innholdet i hver <p> element:

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

Prøv selv

Eksempel 2

Sett inn en streng før innholdet i hver <p> element og sett stilen på innholdet:

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

Prøv selv

CSS syntaks

::before {
  css deklarationer;
}

Teknisk detalj

Nettleserstøtte

Tallene i tabellen angiver den første nettleserversjonen som fullt ut støtter dette pseudo-elementet.

Relaterede sider

Tutorial:CSS pseudo-element

Kilde:CSS ::after pseudo-element