Pseudo Elementi in CSS

Edoardo Midali

Un pseudo-elemento CSS viene utilizzato per stilizzare parti specifiche di un elemento.

Ad esempio, può essere utilizzato per:

Sintassi

La sintassi dei pseudo-elementi:

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

Lo pseudo-elemento ::first-line viene utilizzato per aggiungere uno stile speciale alla prima riga di un testo.

p::first-line {
  color: red;
}

Le seguenti proprietà si applicano allo pseudo-elemento ::first-line:

Lo pseudo-elemento ::first-letter viene utilizzato per aggiungere uno stile speciale alla prima lettera di un testo.

p::first-letter {
  color: red;
}

Le seguenti proprietà si applicano al pseudo-elemento ::first-letter:

Il pseudo-elemento ::before può essere utilizzato per inserire del contenuto prima del contenuto di un elemento.

L’esempio seguente inserisce un’immagine prima del contenuto di ogni elemento <h1>:

p::before {
  content: url(immagine.png);
}

Il pseudo-elemento ::after può essere utilizzato per inserire del contenuto dopo il contenuto di un elemento.

L’esempio seguente inserisce un’immagine dopo il contenuto di ogni elemento <h1>:

p::after {
  content: url(immagine.png);
}

Lo pseudo-elemento ::marker seleziona i marcatori degli elementi di una lista.

::marker {
  color: #212121;
}

Il pseudo-elemento ::selection corrisponde alla porzione di un elemento selezionata dall’utente.

Le seguenti proprietà CSS possono essere applicate a ::selection

::selection {
  color: yellow;
  background: #212121;
}