📢 Nuovo Corso Laravel API disponibile!

Pseudo Elementi in CSS

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

Ad esempio, può essere utilizzato per:

  • Stilare la prima lettera o riga di un elemento
  • Inserire contenuto prima o dopo il contenuto di un elemento

Sintassi

La sintassi dei pseudo-elementi:

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

Lo Pseudo-elemento ::first-line

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:

  • proprietĂ  del font
  • proprietĂ  del colore
  • proprietĂ  dello sfondo
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Lo Pseudo-elemento ::first-letter

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:

  • proprietĂ  del font
  • proprietĂ  del colore
  • proprietĂ  dello sfondo
  • proprietĂ  del margine
  • proprietĂ  del padding
  • proprietĂ  del bordo
  • text-decoration
  • vertical-align (solo se “float” è “none”)
  • text-transform
  • line-height
  • float
  • clear

Pseudo-elemento ::before

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);
}

Pseudo-elemento ::after

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);
}

Pseudo-elemento ::marker

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

::marker {
color: #212121;
}

Pseudo-elemento ::selection

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

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

  • colore
  • sfondo
  • cursore
  • contorno
::selection {
color: yellow;
background: #212121;
}