Pseudo-elementi

5.1 Principali pseudo-elementi

Gli pseudo-elementi in CSS consentono agli sviluppatori di aggiungere stili e contenuti a parti del documento che non possono essere selezionate con selettori ordinari. Creano elementi "virtuali" che possono essere stilizzati come se fossero parte del markup HTML. È uno strumento potente per creare layout complessi e migliorare l'aspetto delle pagine web.

Cosa sono gli pseudo-elementi

Gli pseudo-elementi sono parole chiave aggiunte ai selettori che permettono di stilizzare parti specifiche degli elementi. Creano elementi virtuali che diventano parte della rappresentazione visiva, ma non modificano il codice HTML originale. Gli pseudo-elementi sono spesso usati per stilizzare la prima lettera, le righe di testo, aggiungere elementi decorativi e altre attività.

Pseudo-elementi principali

Alcuni degli pseudo-elementi più comunemente usati includono:

• ::before: aggiunge contenuto prima del contenuto dell'elemento selezionato
• ::after: aggiunge contenuto dopo il contenuto dell'elemento selezionato
• ::first-letter: stilizzazione della prima lettera dell'elemento
• ::first-line: stilizzazione della prima riga dell'elemento
• ::selection: stilizzazione del testo selezionato dall'utente

Come usare gli pseudo-elementi

Gli pseudo-elementi in CSS sono indicati con doppio due punti (::), anche se alcuni pseudo-elementi possono supportare la vecchia notazione ad un solo due punti (:) per retrocompatibilità.

Sintassi:

    
      selettore::pseudo-elemento {
        proprietà: valore;
        proprietà: valore;
        proprietà: valore;
        ...
      }
    
  

5.2 Esempi di utilizzo degli pseudo-elementi

1. Aggiunta di elementi decorativi

Gli pseudo-elementi sono spesso usati per aggiungere elementi decorativi prima o dopo il contenuto di un elemento:

    
      /* 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;
      }
    
  

In questi esempi, gli pseudo-elementi ::before e ::after sono usati per aggiungere un'icona prima del testo del link e un elemento decorativo dopo un paragrafo rispettivamente.

2. Stilizzazione delle prime lettere e righe

Gli pseudo-elementi possono essere usati per stilizzare le prime lettere o le prime righe di testo, cosa che viene spesso applicata nella tipografia:

    
      /* Stilizzazione della prima lettera del paragrafo */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
      }

      /* Stilizzazione della prima riga del paragrafo */

      p::first-line {
        font-weight: bold;
        color: #e74c3c;
      }
    
  

In questi esempi, gli pseudo-elementi ::first-letter e ::first-line sono usati per stilizzare la prima lettera e la prima riga del paragrafo.

3. Selezione del testo

Lo pseudo-elemento ::selection è usato per stilizzare il testo selezionato dall'utente:

    
      /* Stilizzazione del testo selezionato */

      ::selection {
        background-color: #3498db;
        color: white;
      }
    
  

In questo esempio, il testo selezionato dall'utente avrà un sfondo blu e il colore del testo bianco.

5.3 Caratteristiche e limitazioni degli pseudo-elementi

Limitazioni:

• Solo un utilizzo: gli pseudo-elementi ::before e ::after possono essere usati solo una volta per ogni elemento
• Richiesta di content: gli pseudo-elementi ::before e ::after richiedono l'uso della proprietà content, anche se è vuota
• Compatibilità con i browser: i browser moderni supportano il doppio due punti per indicare gli pseudo-elementi, ma per i vecchi pseudo-elementi funziona anche il singolo due punti

Esempio di utilizzo della proprietà content

    
      /* Esempio di utilizzo di uno pseudo-elemento vuoto per un elemento decorativo */

      div::before {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background-color: #3498db;
      }
    
  

In questo esempio, uno pseudo-elemento vuoto ::before viene usato per aggiungere una striscia decorativa prima del contenuto del div.