CSS Pseudo-elemento (Pseudo-elemento)

I pseudo-elementi CSS Pseudo-elements sono una parola chiave aggiunta alla fine di un selettore che permette di modificare lo stile di parti specifiche dell'elemento selezionato. Attenzione: rispetto ai pseudo-elementi, i pseudo-classi (pseudo-class) possono modificare lo stile dell'elemento in base allo stato.

I pseudo-elementi CSS sono un metodo di stilizzazione degli elementi del documento che non sono definiti da una posizione specifica nel albero del documento.

Cos'è un pseudo-elemento

I pseudo-elementi CSS permettono di impostare lo stile di un elemento o di una parte dell'elemento senza aggiungere alcun ID o classe. Questo è molto utile in situazioni in cui si desidera impostare uno stile solo sulla prima lettera di un paragrafo per creare un effetto di immersione di iniziale, o quando si desidera inserire some contenuti prima o dopo un elemento tramite una tabella di stili.

CSS3 ha introdotto un nuovo sintassi a doppio duepunto (::) per distinguere i pseudo-elementi dai pseudo-classi. La nuova sintassi per i pseudo-elementi può essere fornita nel modo seguente:

Questi sono i pseudo-elementi più utilizzati di seguito:

::first-line pseudo-elemento della prima riga

Il pseudo-elemento ::first-line aggiunge stili speciali alla prima riga del testo.

Nell'esempio seguente, le regole di stile impostate definiscono il formato del primo testo della riga del paragrafo. La lunghezza della riga dipende dalle dimensioni della finestra del browser o dell'elemento contenitore.

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

:: first-letter pseudo-element

::first-letter pseudo-element viene utilizzato per aggiungere stili speciali alla prima lettera della prima riga di un testo. Nell'esempio seguente, le regole di stile impostate definiscono il formato della prima lettera del paragrafo di testo, creando un effetto simile a quello di un'immersione di iniziale.

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

:: before e :: after pseudo-elementi

I pseudo-elementi ::before e ::after possono essere usati per inserire il contenuto generato prima o dopo il contenuto di un elemento. content Quando si usano le proprietà CSS con questi pseudo-elementi, si inserisce il contenuto generato.

Questo è molto utile per decorare ulteriormente elementi ricchi di contenuto che non dovrebbero appartenere al markup effettivo della pagina. Puoi usare questi pseudo-elementi per inserire stringhe normali o oggetti incorporati (ad esempio immagini) e altre risorse.

h1::before　{
　　　　content:　url("images/marker-left.gif");
}
h1::after　{
　　　　content:　url("images/marker-right.gif");
}

Pseudo-elementi e classi CSS

Di solito, non ci serve altro che questi pseudo-elementi per impostare un段落 di testo o altroBloccanteStile dell'elemento. Lì, dichiarare una classe per un pseudo-elemento ha effetto. I pseudo-elementi possono essere usati conClasse CSSLa combinazione produce l'effetto, in particolare per gli elementi con la classe specificata.

Le regole di stile negli esempi seguenti mostreranno la prima lettera di tutti i paragrafi con la classe "article", in verde, di dimensione xx-large.

p.article::first-letter　{
　　　　color:　#00ff00;
　　　　font-size:　xx-large;
}