Pattern decorativi con gli pseudo-elementi
Crei forme decorative, divisori e overlay usando ::before e ::after senza HTML aggiuntivo.
Pattern decorativi con gli pseudo-elementi è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 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.
Filosofia della decorazione con il solo CSS
I pseudo-elementi consentono di creare effetti decorativi complessi senza HTML aggiuntivo. L'obiettivo è usare zero div per la decorazione: tutti gli abbellimenti visivi vengono gestiti in CSS.
Triangolo CSS
Crei triangoli usando elementi di dimensioni nulle con bordi trasparenti:
<div class="triangle"></div>Freccia del tooltip
Una freccia per tooltip realizzata con ::before:
<div class="tooltip" style="position:relative;display:inline-block;background:#333;color:#fff;padding:6px 12px;border-radius:4px;margin-top:16px;">Tooltip text</div>Divisore diagonale di sezione
Una separazione inclinata tra sezioni usando skew o clip-path su ::after:
<div class="section" style="background:linear-gradient(135deg,#4f8cff,#7ee787);height:120px;position:relative;"></div>Sottolineature decorative
Effetti di sottolineatura animati usando ::after:
<a href="#">Hover me (underline animates in on :hover)</a>Badge con ::after
Un badge di notifica sovrapposto senza elementi HTML aggiuntivi:
<span class="nav-icon" data-count="3" style="position:relative;display:inline-block;font-size:1.5rem;margin:16px;">🔔</span>Sovrapposizione sfumata sulle immagini
Una sovrapposizione con sfumatura scura sulle immagini per rendere il testo più leggibile:
<div class="card-image" style="width:100%;height:160px;background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>Segno di spunta con ::before
Un segno di spunta personalizzato per una casella di controllo, disegnato con i bordi CSS:
<div class="custom-check" style="width:20px;height:20px;background:#34c759;border-radius:4px;padding:2px;"></div>Banner a nastro
Un effetto nastro sulle schede, usando ::before con un posizionamento negativo:
<div class="card featured" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;width:200px;">Featured product</div>Effetto shimmer di caricamento
Un effetto shimmer per il caricamento di uno skeleton CSS, senza JavaScript:
<div class="skeleton" style="width:100%;height:60px;border-radius:6px;"></div>Verifica rapida
Quale combinazione di proprietà crea un triangolo rivolto verso l'alto usando solo CSS?
Riepilogo
I pseudo-elementi consentono di creare complessi motivi decorativi senza HTML aggiuntivo: frecce, sovrapposizioni, sottolineature animate, badge, nastri ed effetti shimmer. Tutti si basano su content: "" + position: absolute + un uso creativo di bordi, clip-path e trasformazioni.
Domande Frequenti
La lezione «Pattern decorativi con gli pseudo-elementi» è gratuita?
Sì — il testo completo di «Pattern decorativi con gli pseudo-elementi» è 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 «Pattern decorativi con gli pseudo-elementi»?
Crei forme decorative, divisori e overlay usando ::before e ::after senza HTML aggiuntivo. 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 4 di 4.
Quanto tempo richiede la lezione «Pattern decorativi con gli pseudo-elementi»?
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