Cosa sono gli Pseudo-elementi?

Uno pseudo-elemento CSS viene utilizzato per definire lo stile di parti specificate di un elemento.

Ad esempio, può essere utilizzato per:

• Definire lo stile della prima lettera, o riga, di un elemento
• Inserire contenuto, prima o dopo, il contenuto di un elemento

Sintassi

La sintassi degli 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.

L'esempio seguente formatta la prima riga del testo in tutti gli elementi <p>:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Visualizza esempio

Allo pseudo-elemento ::first-line si applicano le seguenti proprietà:

• proprietà del carattere
• 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 pseudoelemento ::first-letter viene utilizzato per aggiungere uno stile speciale alla prima lettera di un testo.

L'esempio seguente formatta la prima lettera del testo in tutti gli elementi <p>:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Visualizza esempio

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

• proprietà del carattere
• proprietà del colore
• proprietà dello sfondo
• proprietà del margine
• proprietà di padding
• proprietà di bordo
• text-decoration
• vertical-align (solo se "float" è "none")
• text-transform
• line-height
• float
• clear

Pseudo-elementi e classi HTML

Gli pseudo-elementi possono essere combinati con le classi HTML:

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Visualizza esempio

L'esempio su indicato mostrerà la prima lettera dei paragrafi con class="intro", in rosso e di dimensioni maggiori.

Pseudo-elementi multipli

È anche possibile combinare più pseudo-elementi.

Nell'esempio seguente, la prima lettera di un paragrafo sarà rossa, con un carattere di dimensione xx-large. Il resto della prima riga sarà blu e in maiuscoletto. Il resto del paragrafo avrà la dimensione e il colore del carattere predefiniti:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Visualizza esempio

Lo pseudo-elemento ::before

Lo 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 ciascun elemento <h1>:

h1::before {
  content: url(smiley.gif);
}

Visualizza esempio

Lo pseudo-elemento ::after

Lo 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 ciascun elemento <h1>:

h1::after {
  content: url(smiley.gif);
}

Visualizza esempio

Lo pseudo-elemento ::marker

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

L'esempio seguente definisce lo stile dei marcatori degli elementi dell'elenco:

::marker {
  color: red;
  font-size: 23px;
}

Visualizza esempio

Lo pseudo-elemento ::selection

Lo pseudo-elemento ::selection corrisponde alla porzione di un elemento selezionata da un utente.

Le seguenti proprietà CSS possono essere applicate alla ::selection: color, background, cursor, e outline.

L'esempio seguente rende il testo selezionato rosso su sfondo giallo:

::selection {
  color: red;
  background: yellow;
}

Visualizza esempio

Tutti gli pseudo-elementi in CSS