Pseudo-elemento CSS ::after
Usa lo pseudo-elemento CSS ::after per aggiungere elementi dopo il contenuto. Scopri lo pseudo-elemento e prova gli esempi.
In CSS, ::after crea uno pseudo-elemento che è l'ultimo figlio dell'elemento selezionato. Genera contenuto che appare dopo il contenuto originale dell'elemento. Può essere usato per inserire caratteri, stringhe di testo o immagini.
Il valore è definito dalla proprietà content.
Per impostazione predefinita, lo pseudo-elemento ::after è inline.
Può essere animato, posizionato o reso flottante come qualsiasi altro contenuto.
Lo pseudo-elemento ::after può essere usato anche con la notazione a due punti singoli :after, supportata da tutti i browser.
Lo pseudo-elemento ::before aggiunge contenuto prima di qualsiasi altro contenuto, mentre lo pseudo-elemento ::after aggiunge contenuto dopo qualsiasi altro contenuto in HTML.
Versione
Sintassi
Pseudo-elemento CSS ::after
::after {
css declarations;
}Esempio dello pseudo-elemento ::after:
Esempio di CSS ::after
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::after {
content: " - William Shakespeare.";
}
</style>
</head>
<body>
<h2>::after selector example</h2>
<p>"Be or not to be"</p>
</body>
</html>Nell'esempio seguente è possibile aggiungere stili al contenuto.
Esempio dello pseudo-elemento ::after con contenuto stilizzato:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::after {
content: " - William Shakespeare.";
background-color: #eee;
color: #1c87c9;
padding: 5px 3px;
border: 2px dashed #000;
margin-left: 5px;
}
</style>
</head>
<body>
<h2>::after selector example</h2>
<p>"Be or not to be"</p>
</body>
</html>