Contenuto ::before e ::after
Inserisca contenuto generato prima o dopo gli elementi usando ::before e ::after con la proprietà content.
Contenuto ::before e ::after è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Che cosa sono gli pseudo-elementi?
Gli pseudo-elementi creano elementi virtuali a cui vengono applicati stili come se facessero parte del DOM. Utilizzano i doppi due punti ::. I più utilizzati sono ::before e ::after.
::before e ::after
::before inserisce contenuto generato prima del contenuto di un elemento. ::after lo inserisce dopo. Per essere visualizzati, entrambi richiedono la proprietà content.
<span class="element">Text with generated content</span>La proprietà content
La proprietà content accetta:
- Una stringa:
content: "text" - Una stringa vuota:
content: ""(comune per le forme decorative) - Un URL:
content: url("icon.svg") - Un contatore:
content: counter(step) attr():content: attr(data-tooltip)
Virgolette tipografiche decorative
Aggiunga le virgolette tipografiche senza inserirle nell'HTML:
<blockquote>Design is not just what it looks like — design is how it works.</blockquote>Forme con content vuoto
Impostare content: "" insieme a posizione e dimensioni consente di creare forme decorative senza HTML aggiuntivo:
<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>Clearfix con ::after
Il clearfix classico usa ::after per annullare l'effetto dei float senza markup aggiuntivo:
<div class="clearfix" style="border:1px solid #ccc;">
<div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>Tooltip con ::after
Tooltip realizzato solo con CSS usando ::after e attr():
<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>Icona con content: url()
Inserisca una piccola icona prima dei collegamenti usando content: url():
<a href="https://example.com" target="_blank" rel="noopener">External link</a>Limitazioni dei pseudo-elementi
I pseudo-elementi non fanno parte del DOM. Sono:
- Non selezionabili né ricercabili dagli utenti
- Non accessibili agli screen reader per impostazione predefinita
- Non selezionabili come target da JavaScript
Non inserisca mai contenuti essenziali nei contenuti generati: utilizzi i pseudo-elementi solo per scopi decorativi.
Due punti singolo e doppio
La sintassi con un solo due punti (:before) era quella di CSS2. I due punti doppi (::before) sono lo standard CSS3 che distingue i pseudo-elementi dalle pseudo-classi. Entrambe le sintassi funzionano nei browser moderni, ma per il nuovo codice utilizzi i due punti doppi.
Quali elementi supportano ::before/::after
Gli elementi sostituiti (img, input, select, video) non possono avere pseudo-elementi perché non dispongono di un'area del contenuto in cui inserirli. Utilizzi invece un elemento contenitore per la decorazione.
Verifica rapida
Quale valore di content è necessario per un pseudo-elemento decorativo ::before senza testo visibile?
Riepilogo
::before e ::after inseriscono contenuti generati attorno al contenuto reale di un elemento. La proprietà content è obbligatoria. Li utilizzi per forme decorative, icone, virgolette e tooltip, ma mai per contenuti significativi a cui gli utenti devono poter accedere o che devono poter leggere.
Domande Frequenti
La lezione «Contenuto ::before e ::after» è gratuita?
Sì — il testo completo di «Contenuto ::before e ::after» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Contenuto ::before e ::after»?
Inserisca contenuto generato prima o dopo gli elementi usando ::before e ::after con la proprietà content. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Contenuto ::before e ::after»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Contenuto ::before e ::after
- ::placeholder ::selection e ::marker
- Contatori CSS con ::before
- Pattern decorativi con gli pseudo-elementi