۝ OraWeb.it ۝ Pseudo-elementi CSS

I pseudo-elementi in CSS

Pseudo-elementi in CSS

Gli pseudo-elementi CSS permettono di selezionare e stilizzare porzioni virtuali di un elemento HTML, come la prima lettera o la prima riga di un paragrafo, oppure di generare contenuti aggiuntivi senza modificare il codice HTML. Gli pseudo-elementi sono utili per effetti visivi, accessibilità e per mantenere il markup pulito.

HOSTING • VPS • DEDICATED SERVER • HOUSING • SSL • PEC • CLOUD • DOMAIN

Approfondimenti

Quando usare gli pseudo-elementi: quando si vuole aggiungere o stilizzare parti di un elemento che non sono direttamente rappresentate nel codice HTML, come contenuti decorativi (::before, ::after) o selezioni parziali (::first-letter, ::selection).
Abbinamenti utili con altre proprietà: gli pseudo-elementi si usano spesso con content, color, font-style, background e position per creare effetti visivi o layout decorativi.
Contenuti generati: ::before e ::after permettono di inserire contenuto tramite la proprietà content e vengono spesso usati per icone, simboli o elementi decorativi.
Stilizzazione parziale del testo: ::first-letter e ::first-line permettono di applicare stili diversi alla prima lettera o alla prima riga di un blocco di testo, ad esempio nei paragrafi introduttivi o in titoli decorativi.
Supporto all’accessibilità: pseudo-elementi come ::placeholder o ::cue migliorano l’esperienza utente e la leggibilità nei moduli o nei contenuti multimediali.
Web Components: con ::part() e ::slotted() si possono stilizzare internamente componenti personalizzati mantenendo l’incapsulamento.

Gli pseudo-elementi rendono possibile un controllo avanzato del layout e della presentazione grafica senza alterare la struttura HTML. Sono spesso usati per migliorare l’estetica e l’accessibilità di una pagina.

✅ Tabella Pseudo-elementi

Nota:
gli pseudoelementi si scrivono con due due punti (::) per distinguere meglio da pseudoclassi (:), anche se alcuni browser supportano ancora la notazione con uno solo (:before, :after...).

Pseudoelemento	Descrizione
`::before`	Inserisce contenuto prima del contenuto effettivo di un elemento.
`::after`	Inserisce contenuto dopo il contenuto effettivo di un elemento.
`::first-letter`	Seleziona la prima lettera di un blocco di testo.
`::first-line`	Seleziona la prima riga visibile di un blocco di testo.
`::selection`	Applica uno stile al testo selezionato dall’utente.
`::placeholder`	Seleziona il testo segnaposto in un campo input o textarea.
`::marker`	Seleziona il simbolo di un elemento lista (es. il pallino o numero).
`::cue`	Stilizza le didascalie ('<track>') nei contenuti video.
`::backdrop`	Stilizza il fondo modale dietro elementi a tutto schermo come i `<dialog>`.
`::file-selector-button`	Stilizza il pulsante di selezione file in un input `type="file"`.
`::part()`	Seleziona una parte interna di un Web Component esposta con l’attributo `part`.
`::slotted()`	Stilizza gli elementi inseriti in uno slot all’interno di un Web Component.

Esempi pratici

Codice Esempio: Pseudo-elementi

CODE: CSS preleva codice

/* Inserisce una freccia prima di ogni link */

```
a::before {
```
```
  content: "→ ";
```
```
  color: gray;
```
```
}
```
```
 
```

/* Evidenzia la prima lettera di ogni paragrafo */

```
p::first-letter {
```
```
  font-size: 200%;
```
```
  font-weight: bold;
```
```
  color: darkred;
```
```
}
```
```
 
```

/* Applica uno sfondo personalizzato al testo selezionato */

```
::selection {
```
```
  background-color: yellow;
```
```
  color: black;
```
```
}
```
```
 
```

/* Stilizza il testo segnaposto nei campi input */

```
input::placeholder {
```
```
  color: #888;
```
```
  font-style: italic;
```
```
}
```
```
 
```

/* Nasconde lo sfondo del dialog a schermo intero */

```
::backdrop {
```
```
  background: rgba(0, 0, 0, 0.5);
```
```
}
```
```
 
```

/* Stilizza il contenuto di uno slot in un Web Component */

```
::slotted(span) {
```
```
  color: blue;
```
```
  font-weight: bold;
```
```
}
```

I pseudo-elementi in CSS

Pseudo-elementi in CSS

Approfondimenti

✅ Tabella Pseudo-elementi

Esempi pratici

Follow us

Quick Links

Information

Contact Information