Pseudo-elementi

Podcast CSS - 014: Pseudo-elementi .

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

In CSS, puoi utilizzare lo pseudo-elemento ::first-letter per ottenere questo tipo di dettaglio di progettazione.

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 aggiuntivo senza dover aggiungere altro HTML. Questa soluzione di esempio, utilizzando ::first-letter, è uno dei tanti pseudo-elementi. Hanno una serie di ruoli, e in questa lezione scoprirai quali pseudo-elementi sono disponibili e come puoi utilizzarli.

::before e ::after

Entrambi i campi ::before e ::after Gli pseudo-elementi 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 se vuota, ma tieni presente che qualcosa di diverso da una stringa vuota probabilmente verrà annunciato da uno screen reader. Puoi aggiungere un'immagine url, che inserisce un'immagine nelle dimensioni originali, quindi non potrai ridimensionarlo. Puoi anche inserire un counter

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

::first-letter

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

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

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

::first-line

La ::first-line pseudo-elemento ti consentirà di applicare uno stile alla prima riga di testo solo se l'elemento con ::first-line applicato ha un valore display di block, inline-block, list-item, table-caption o table-cell.

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

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

• color
• background strutture
• font strutture
• text strutture

::backdrop

Se hai un elemento presentato in modalità a schermo intero, come <dialog> o <video>, puoi definire lo sfondo, ovvero lo spazio tra l'elemento e il resto della pagina, mediante lo Pseudo-elemento ::backdrop:

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

::marker

La ::marker pseudo-elemento consente di applicare uno stile al punto o al numero di un elemento dell'elenco o alla 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. Puoi utilizzarlo per impostare i simboli più e meno per gli stati chiusi e vuoti di un elemento <summary>, ad esempio.

::selection

La ::selection ti consente di modificare l'aspetto del testo selezionato.

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

Questo pseudo-elemento può essere utilizzato per applicare uno stile a tutto il testo selezionato, come illustrato nella demo precedente. Può anche essere utilizzato 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 per gli elementi del modulo, come <input> con un attributo placeholder. La ::placeholder ti consente di modificare lo stile del testo.

input::placeholder {
  color: darkcyan;
}

::placeholder supporta solo un sottoinsieme di regole CSS:

• color
• background strutture
• font strutture
• text strutture

::cue

L'ultima parte di questo tour degli pseudo-elementi è la ::cue pseudo-elemento. In questo modo puoi definire i segnali WebVTT, che sono le didascalie di un elemento <video>.

Puoi anche inserire un selettore in un ::cue, che ti consente di 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 le tue conoscenze sugli pseudo-elementi