Pseudo-elemento ::before CSS

Definizione e uso

CSS ::before I pseudo-elementi vengono utilizzati per inserire del contenuto prima del contenuto dell'elemento specificato.

Usa content L'attributo specifica il contenuto da inserire. Il valore di content può essere:

• Stringa: content: "Hello world!";
• Immagine: content: url(myimage.jpg);
• Nessun contenuto: content: none;
• Contatore: content: counter(li);
• Virgolette: content: open-quote;
• Valore dell'attributo: content: " (" attr(href) ")";

Suggerimento:Nota: Il contenuto inserito rimane all'interno dell'elemento specificato. Il contenuto inserito viene aggiunto prima di altri contenuti interni all'elemento.

Usa ::after Inserisci del contenuto dopo il contenuto di un elemento specifico.

Esempio

Esempio 1

Inserisci una stringa prima del contenuto di ogni elemento <p>:

p::before {
  content: "Leggi questo: ";
}

Prova tu stesso

Esempio 2

Inserisci una stringa prima del contenuto di ogni elemento <p> e imposta lo stile del contenuto inserito:

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

Prova tu stesso

Sintassi CSS

::before {
  declarazioni css;
}

Dettagli tecnici

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente il pseudo-elemento.

Pagine correlate

Tutorial:pseudo-elemento CSS

Riferimento:pseudo-elemento ::after CSS