6.1 La proprietà content
Gli pseudo-elementi ::before e ::after permettono di aggiungere contenuto prima e dopo il contenuto di un elemento, senza modificare il codice HTML.
Sono ampiamente utilizzati per scopi decorativi, migliorare l'interfaccia utente e creare pagine web più interattive.
Cosa sono gli pseudo-elementi ::before e ::after?
Gli pseudo-elementi ::before e ::after creano elementi virtuali che vengono inseriti rispettivamente prima e dopo
il contenuto dell'elemento selezionato. Questi pseudo-elementi sono spesso utilizzati per aggiungere icone, elementi decorativi
o altri effetti visivi.
Sintassi before:
selettore::before {
content: "testo o altri valori";
/* stili */
}
Sintassi after:
selettore::after {
content: "testo o altri valori";
/* stili */
}
La proprietà content
La proprietà chiave per gli pseudo-elementi ::before e ::after è content. Questa proprietà definisce il contenuto
dello pseudo-elemento. Può essere una stringa di testo, un'immagine, o anche un valore vuoto, se è necessario solo un effetto visivo.
Valori possibili della proprietà content:
- Testo:
"testo" - Immagine:
url("path/to/image.png") - Valore vuoto:
"" - Attributi:
attr(attributeName) - Contatori:
counter(name)
6.2 Esempi di utilizzo di ::before e ::after
Aggiunta di elementi decorativi
Esempio 1: Aggiunta di un'icona prima del testo
In questo esempio lo pseudo-elemento ::before viene utilizzato per aggiungere un'icona prima del testo del link.
margin-right aggiunge spazio tra l'icona e il testo:
/* Aggiunta di un'icona prima del testo del link */
a::before {
content: "🔗";
margin-right: 5px;
}
Esempio 2: Aggiunta di un elemento decorativo dopo un paragrafo
In questo esempio lo pseudo-elemento ::after aggiunge un elemento decorativo dopo il paragrafo. display: block e
text-align: right sono utilizzati per allineare l'elemento a destra:
/* Aggiunta di un elemento decorativo dopo un paragrafo */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
Creazione di bordi e sfondi decorativi
Esempio 3: Bordo decorativo attorno all'elemento
In questo esempio lo pseudo-elemento ::before viene utilizzato per creare una striscia decorativa sopra l'elemento
div. position: absolute e top: -10px permettono di posizionare la striscia sopra l'elemento:
/* Bordo decorativo attorno all'elemento */
div::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
Esempio 4: Aggiunta automatica di virgolette
In questo esempio gli pseudo-elementi ::before e ::after vengono utilizzati per aggiungere virgolette attorno al blocco di citazione:
/* Aggiunta automatica di virgolette attorno al blocco di citazione */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
Esempio 5: Numerazione dei titoli
In questo esempio lo pseudo-elemento ::before viene utilizzato per aggiungere un numero prima del titolo h2.
counter-increment incrementa il valore del contatore, e content: counter(section) inserisce il valore corrente del contatore:
/* Numerazione dei titoli */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
6.3 Applicazione e stilizzazione degli pseudo-elementi
Stilizzazione degli pseudo-elementi
Gli pseudo-elementi possono essere stilizzati come qualsiasi altro elemento. Supportano la maggior parte delle proprietà CSS, inclusi colore, sfondo, bordi, dimensioni e posizionamento.
Utilizzo degli pseudo-elementi per creare layout complessi
Gli pseudo-elementi sono spesso utilizzati per creare elementi decorativi nei layout, come bordi, ombre e altri effetti visivi, senza la necessità di aggiungere elementi HTML aggiuntivi.
Esempio: ogni elemento della lista avrà un marcatore blu prima del testo:
ul li::before {
content: "•";
color: blue;
margin-right: 5px;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
6.4 Esempio di implementazione completa
/* Aggiunta di un'icona prima del testo del link */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Aggiunta di un elemento decorativo dopo un paragrafo */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
/* Bordo decorativo attorno all'elemento */
.decorative-box {
position: relative;
}
.decorative-box::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
/* Aggiunta automatica di virgolette attorno al blocco di citazione */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
/* Numerazione dei titoli */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio di pseudo-elementi ::before e ::after</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">Link con icona</a>
<p>Paragrafo con elemento decorativo dopo il testo</p>
<div class="decorative-box">Elemento con bordo decorativo</div>
<blockquote>Citazione con virgolette automatiche</blockquote>
<h2>Titolo con numerazione</h2>
<h2>Un altro titolo</h2>
</body>
</html>
GO TO FULL VERSION