Falso elemento CSS ::after

Definizione e uso

CSS ::after Gli elementi pseudo vengono utilizzati per inserire del contenuto dopo il 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: close-quote;
• Valore dell'attributo: content: " (" attr(href) ")";

Suggerimento:Nota che il contenuto inserito rimane all'interno dell'elemento specificato. Il contenuto inserito viene aggiunto dopo altri contenuti interni all'elemento.

Usa ::before Inserisci del contenuto prima del contenuto dell'elemento specifico.

Esempio

Esempio 1

Inserisci una stringa dopo il contenuto di ogni elemento <p>:

p::after {
  content: " - Ricorda questo";
}

Prova tu stesso

Esempio 2

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

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

Prova tu stesso

Sintassi CSS

::after {
  declarazioni css;
}

Dettagli tecnici

Supporto del browser

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

Pagine correlate

Tutorial:Elemento pseudo-CSS

Riferimento:Falso elemento CSS ::before