Pseudo-elementi

Il podcast CSS - 014: Pseudo-elementi

Se hai un articolo di contenuti e vuoi che la prima lettera sia un calo molto più grande, come puoi farlo?

Nei CSS, puoi usare lo pseudo-elemento ::first-letter per ottenere questo tipo di dettaglio di design.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

Uno pseudo-elemento è come l'aggiunta o il targeting di un elemento extra senza dover aggiungere altro HTML. Questa soluzione di esempio, che utilizza ::first-letter, è uno dei tanti pseudo-elementi. Hanno vari ruoli e in questa lezione scoprirai quali pseudo-elementi sono disponibili e come utilizzarli.

::before e ::after

Entrambi gli pseudo-elementi ::before e ::after creano un elemento secondario all'interno di un elemento solo se definisci una proprietà content.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content può essere qualsiasi stringa, anche vuota, ma tieni presente che qualsiasi cosa diversa da una stringa vuota verrà probabilmente enunciata da uno screen reader. Puoi aggiungere un'immagine url che inserirà un'immagine nelle sue dimensioni originali, quindi non potrai ridimensionarla. Puoi anche inserire un elemento counter.

Dopo aver creato un elemento ::before o ::after, puoi personalizzarlo come preferisci, senza limiti. Puoi inserire solo un elemento ::before o ::after in un elemento che accetta gli elementi secondari (elementi con una struttura ad albero dei documenti), pertanto elementi come <img />, <video> e <input> non funzioneranno.

::first-letter

Abbiamo incontrato questo pseudo-elemento all'inizio della lezione. È importante tenere presente che non tutte le proprietà CSS possono essere utilizzate per il targeting di ::first-letter. Le proprietà disponibili sono:

• color
• Proprietà background (come background-image)
• Proprietà border (come border-color)
• float
• Proprietà di font (come font-size e font-weight)
• proprietà di testo (come text-decoration e word-spacing)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

Lo pseudo-elemento ::first-line ti permette di definire lo stile della prima riga di testo solo se l'elemento a cui è applicato ::first-line ha un valore display pari a block, inline-block, list-item, table-caption o table-cell.

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

Come per lo pseudo-elemento ::first-letter, puoi utilizzare solo un sottoinsieme di proprietà CSS:

• color
• background strutture
• font strutture
• text strutture

::backdrop

Se un elemento viene presentato in modalità a schermo intero, ad esempio <dialog> o <video>, puoi definire lo sfondo, ovvero lo spazio tra l'elemento e il resto della pagina, con lo pseudo-elemento ::backdrop:

video::backdrop {
  background-color: goldenrod;
}

::marker

Lo pseudo elemento ::marker consente di definire il punto elenco o il numero di un elemento dell'elenco o la freccia di un elemento <summary>.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

Per ::marker è supportato solo un piccolo sottoinsieme di proprietà CSS:

• color
• content
• white-space
• font strutture
• Proprietà animation e transition

Puoi modificare il simbolo dell'indicatore utilizzando la proprietà content. Ad esempio, puoi utilizzarlo per impostare i simboli più e meno per gli stati chiuso e vuoto di un elemento <summary>.

::selection

Lo pseudo-elemento ::selection ti consente di definire l'aspetto del testo selezionato.

::selection {
  background: green;
  color: white;
}

Questo pseudo-elemento può essere utilizzato per definire tutto il testo selezionato come nella demo sopra. Può essere utilizzato anche in combinazione con altri selettori per uno stile di selezione più specifico.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

Come per altri pseudo-elementi, è consentito solo un sottoinsieme di proprietà CSS:

• color
• background-color ma non background-image
• text strutture

::placeholder

Puoi aggiungere un suggerimento di supporto agli elementi del modulo, ad esempio <input> con un attributo placeholder. Lo pseudo-elemento ::placeholder ti consente di applicare uno stile al testo.

input::placeholder {
  color: darkcyan;
}

L'istruzione ::placeholder supporta solo un sottoinsieme di regole CSS:

• color
• background strutture
• font strutture
• text strutture

::cue

L'ultimo di questo tour degli pseudo-elementi è lo pseudo elemento ::cue. Ciò ti consente di applicare uno stile ai segnali WebVTT, che sono le didascalie di un elemento <video>.

Puoi anche passare un selettore in un elemento ::cue, per applicare uno stile a elementi specifici all'interno di una didascalia.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

Verifica le tue conoscenze

Verifica la tua conoscenza degli pseudo-elementi