Pseudo-elemento ::after CSS

Definizione e uso

CSS ::after I pseudo-elementi vengono utilizzati per inserire alcuni contenuti 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);
• Citazione: 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 alcuni contenuti prima del contenuto di un 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

教程：elemento pseudo-CSS

Riferimento:Pseudo-elemento ::before CSS