CSS Pseudo-Element è utilizzato per modellare la parte di un elemento specifico. Ad esempio, può essere utilizzato per inserire il contenuto prima o dopo l'elemento o modellare la prima riga o lettera dell'elemento. Per fare ciò, vengono utilizzati gli elementi dello pseudo-prima e dopo che entrano in vigore.

Questo blog ti istruirà su CSS "Prima" E "Dopo"Selettori. Ma prima, discuteremo della sintassi degli pseudo-elementi.

Come usare "pseudo-elementi" in CSS?

La sintassi dello pseudo-elemento è menzionata di seguito:

Selettore :: pseudo-element
Proprietà CSS ..

Qui:

• "Selettore": Gli elementi HTML che vogliamo modellare in CSS sono scelti usando i selettori CSS. Questi selettori possono essere selettori ID, selettori di elementi, selettori di classe o altro ancora.
• "Pseudo-elemento": Pseudo-Element viene utilizzato per modellare la parte di un elemento specifico. Può essere prima, dopo, prima riga, prima lettera o altro ancora.
• "Proprietà CSS": Queste proprietà possono essere utilizzate per modellare il contenuto aggiunto.

Esempio

Il primo passo è creare un nuovo div con la classe "principale". All'interno di questo elemento div, includi

E

elementi per aggiungere alcuni contenuti alla pagina web:

Ciao mondo!

Linuxhint è il miglior sito di tutorial.

Unisciti alla nostra comunità

Scriviamo articoli e realizziamo video per educare il mondo online.

Stile prima dell'elemento "H2"

H2 :: prima di
Contenuto: "->";
Colore: verde;

IL "H2 :: prima"Si riferisce all'aggiunta di stile all'elemento H2 con le seguenti proprietà:

• "contenuto"La proprietà specifica il contenuto inserito nell'elemento.
• "colore"La proprietà viene utilizzata per impostare il colore del testo dell'elemento.

Elemento "P" di stile

.principale p
Font-size: 20px;

IL ".principale p"Si riferisce all'elemento p del div principale. La sua dimensione del carattere è impostata su 20px utilizzando il "dimensione del font" proprietà.

Ecco il risultato del codice sopra:

Come possiamo vedere, ogni elemento H1 nel file HTML è specificato con il simbolo prima di esso.

Ecco l'elenco dei contenuti che possono essere specificati nella proprietà del contenuto:

• "Una pausa di linea": Per inserire un'interruzione di linea, usa"\UN" carattere
• "Niente": È specificato come virgole invertite vuote ed è utile quando si inseriscono immagini di sfondo.
• "Un'immagine": Per inserire un'immagine nella proprietà del contenuto, specifichiamo" URL "dell'immagine.
• "Una stringa": Caratteri speciali devono essere codificati come entità Unicode.

Come aggiungere l'elemento GIF "prima"?

Possiamo anche aggiungere gif o immagini prima o dopo gli elementi. Guarda l'esempio sotto.

Stile prima dell'elemento "H1"

H1 :: prima di
Immagina di background: URL (/GIFS/Smile.gif);
Size di sfondo: 50px;
Ripeat background: no-ripetizione;
display: blocco inline;
larghezza: 50px;
Altezza: 50px;
contenuto: "";

IL "H1 :: prima"Si riferisce allo stile di inserimento prima dell'elemento H1. Le seguenti proprietà vengono applicate all'oggetto inserito prima dell'elemento H1:

• "immagine di sfondo"La proprietà specifica l'URL della GIF.
• "Size di sfondo"La proprietà viene utilizzata per specificare la dimensione di sfondo. S
• "Ripeat di sfondo"La proprietà definisce come vengono ripetute le immagini.
• "Schermo"Proprietà con il valore"blocco inline"Permette di specificare l'altezza e la larghezza dell'elemento.
• "larghezza"La proprietà imposta la larghezza dell'elemento HTML.
• "altezza"La proprietà imposta l'altezza dell'elemento HTML.
• "contenuto"La proprietà viene utilizzata per inserire il contenuto generato in combinazione con gli pseudo-selettori.

Stile "Main" Div

.principale
Background-color: RGB (245, 245, 44);
imbottitura: 5px;

IL ".principale"La classe dell'elemento Div è disegnata con le proprietà elencate:

• "colore di sfondo"La proprietà viene utilizzata per specificare il colore di sfondo dell'elemento.
• "imbottitura"La proprietà viene utilizzata per impostare lo spazio attraverso il contenuto della T o all'interno del bordo.

Si può osservare che la GIF è posizionata prima di ogni elemento H1:

Come inserire simboli "dopo" elementi specifici?

Lo pseudo-selettore "::Dopo"Viene utilizzato per inserire il contenuto dopo l'elemento. L'esempio seguente dimostra lo pseudo-selettore dopo.

Esempio

Crea un nuovo elemento div con il "principale" classe. All'interno di questo elemento, aggiungi

E

elementi per aggiungere alcuni contenuti alla pagina web:

Html

Hyper Text Markup Language

CSS

Foglio di stile a cascata

Stile dopo elemento "h2"

H2 :: dopo
contenuto: "*";
colore rosso;
Font-size: 30px;

IL "H2 :: dopo"Si riferisce al dopo l'elemento H2. Di seguito sono riportate le proprietà applicate ad esso:

• "contenuto"La proprietà specifica il contenuto inserito nell'elemento.
• "colore"La proprietà viene utilizzata per definire il colore del carattere.
• "dimensione del font"La proprietà viene utilizzata per l'impostazione della dimensione del carattere dell'elemento.

Elemento "P" di stile

.Main-Content P
Font-size: 20px;

La dimensione del carattere dell'elemento P del Div principale del contenuto principale è specificata usando il “dimensione del font" proprietà.

L'output dello snippet di codice sopra è mostrato di seguito:

Abbiamo appreso con successo CSS prima e dopo i selettori in CSS.

Conclusione

In CSS, gli elementi di pseudo vengono utilizzati per specificare alcune proprietà di styling nella parte di un elemento. Ad esempio, il “::Prima" E "::Dopo"Gli elementi specificati vengono utilizzati per aggiungere lo stile prima e dopo l'elemento desiderato, rispettivamente. Questo blog ha dimostrato l'uso di CSS prima e dopo i selettori.