CSS => Pseudo-Elementi

introduzione

Gli pseudo-elementi, proprio come le pseudo-classi, vengono aggiunti a un selettore CSS ma, invece di descrivere uno stato speciale, consentono di definire e definire determinate parti di un elemento html.

Ad esempio, lo pseudoelemento :: first-letter ha come target solo la prima lettera di un elemento di blocco specificato dal selettore.

Sintassi

selector :: pseudo-element {property: value}

Parametri

pseudo-elemento	Descrizione
`::after`	Inserisci il contenuto dopo il contenuto di un elemento
`::before`	Inserisci il contenuto prima del contenuto di un elemento
`::first-letter`	Seleziona la prima lettera di ogni elemento
`::first-line`	Seleziona la prima riga di ciascun elemento
`::selection`	Corrisponde alla parte di un elemento selezionato da un utente
`::backdrop`	Utilizzato per creare uno sfondo che nasconde il documento sottostante per un elemento nello stack del livello superiore
`::placeholder`	Permette di modellare il testo segnaposto di un elemento del modulo (Sperimentale)
`::marker`	Per applicare gli attributi in stile elenco su un determinato elemento (Sperimentale)
`::spelling-error`	Rappresenta un segmento di testo contrassegnato erroneamente dal browser (sperimentale)
`::grammar-error`	Rappresenta un segmento di testo che il browser ha contrassegnato come grammaticamente scorretto (sperimentale)

Osservazioni

A volte vedrai i doppi due punti ( :: :) invece di uno solo ( : . Questo è un modo per separare pseudo-classi da pseudo-elementi, ma alcuni vecchi browser come Internet Explorer 8 supporta solo singolo due punti ( : ) per la pseudo-elementi.
Si può usare solo uno pseudo-elemento in un selettore. Deve apparire dopo i selettori semplici nella dichiarazione.
Gli pseudo-elementi non fanno parte del DOM, quindi non sono targetizzabili da :hover o altri eventi utente.

Pseudo-Elementi

Gli pseudo-elementi vengono aggiunti ai selettori ma, invece di descrivere uno stato speciale, consentono di definire alcune parti di un documento.

L'attributo content è richiesto per gli pseudo-elementi da renderizzare; tuttavia, l'attributo può avere un valore vuoto (ad es. content: "" ).

div::after {
  content: 'after';
  color: red;
  border: 1px solid red;
}

div {
  color: black;
  border: 1px solid black;
  padding: 1px;
}

div::before {
  content: 'before';
  color: green;
  border: 1px solid green;
}

Pseudo-elementi nelle liste

Gli pseudo-elementi sono spesso usati per cambiare l'aspetto delle liste (principalmente per liste non ordinate, ul ).

Il primo passo è rimuovere i punti elenco predefiniti:

ul {
  list-style-type: none;
}

Quindi aggiungi lo stile personalizzato. In questo esempio, creeremo caselle sfumate per i punti elenco.

li:before {
  content: "";
  display: inline-block;
  margin-right: 10px; 
  height: 10px;
  width: 10px;
  background: linear-gradient(red, blue);
}

HTML

<ul>
   <li>Test I</li>
   <li>Test II</li>
</ul>

Risultato

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

CSS
Pseudo-Elementi

Ricerca…