Pseudo-elemento CSS ::before
Usa lo pseudo-elemento CSS ::before per aggiungere elementi prima del contenuto. Scopri lo pseudo-elemento e prova gli esempi.
Lo pseudo-elemento ::before è un elemento di contenuto generato che inserisce qualsiasi tipo di contenuto prima del contenuto di un elemento. Può essere usato per inserire caratteri, stringhe di testo e immagini. Il valore è definito dalla proprietà content.
Per impostazione predefinita, lo pseudo-elemento ::before è inline.
Questo pseudo-elemento può essere animato, posizionato o reso flottante come qualsiasi altro contenuto.
Lo pseudo-elemento ::before può essere usato anche con la notazione a due punti singoli :before, supportata da tutti i browser.
Lo pseudo-elemento ::after aggiunge contenuto dopo qualsiasi altro contenuto, mentre lo pseudo-elemento ::before aggiunge contenuto prima di qualsiasi altro contenuto in HTML.
Versione
Sintassi
Pseudo-elemento CSS ::before
::before {
css declarations;
}Esempio dello pseudo-elemento ::before:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: " William Shakespeare -";
}
</style>
</head>
<body>
<h2>::before selector example</h2>
<p>"Be or not to be".</p>
</body>
</html>Nell'esempio seguente, l'utente può aggiungere stili al contenuto.
Esempio dello pseudo-elemento ::before con contenuto stilizzato:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: "William Shakespeare-";
display: inline-block;
background-color: #ccc;
color: #666;
border: 2px dotted #000;
}
</style>
</head>
<body>
<h2>::before selector example</h2>
<p>"Be or not to be".</p>
</body>
</html>Per gli pseudo-elementi puramente decorativi, imposta sempre content: '' per assicurarti che vengano renderizzati correttamente su tutti i browser.