CSS ::before-pegel

Definition och användning

CSS ::before Pegel används för att infoga innehåll innan innehållet i ett specifikt element.

Använd content Egenskapsvärde: content: " (" attr(href) ")";

• Sträng: content: "Hello world!";
• Bild: content: url(myimage.jpg);
• Inget innehåll: content: none;
• Räknare: content: counter(li);
• Citat: content: open-quote;
• Attributvärde: content: " (" attr(href) ")";

Tips:Observera att det infogade innehållet fortfarande ligger inom det angivna elementet. Det infogade innehållet läggs till före annat innehåll inom elementet.

Använd ::after Infoga innehåll efter innehållet i ett specifikt element.

Exempel

Exempel 1

Infoga en sträng innan innehållet i varje <p>-element:

p::before {
  content: "Läs detta: ";
}

Prova själv

Exempel 2

Infoga en sträng innan innehållet i varje <p>-element och ställ in stilen för den infogade innehållet:

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

Prova själv

CSS-syntax

::before {
  css-uttryck;
}

Tekniska detaljer

Webbläsarstöd

Numrerna i tabellen anger den första webbläsarens version som fullständigt stöder denna pegel.

Relaterade sidor

Lär dig:CSS-pegel

Referens:CSS ::after-pegel