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:
Esempio
Il primo passo è creare un nuovo div con la classe "principale". All'interno di questo elemento div, includi
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à:
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:
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:
Stile "Main" Div
.principale
Background-color: RGB (245, 245, 44);
imbottitura: 5px;
IL ".principale"La classe dell'elemento Div è disegnata con le proprietà elencate:
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:
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.