Durante lo sviluppo di un sito Web, gli sviluppatori Web si trovano spesso in situazioni in cui è necessario modellare una determinata parte di un elemento o aggiungere determinati contenuti prima o dopo un particolare elemento. Tutti questi compiti possono essere eseguiti utilizzando gli elementi pseudo-elementi forniti in CSS. Questo post ti insegnerà tutto sugli elementi dello pseudo.

Passerai attraverso i seguenti argomenti in questo post.

1. Cosa sono gli elementi dello pseudo-in CSS
2. ::prima lettera
3. ::prima linea
4. ::Prima
5. ::Dopo
6. ::selezione

Cosa sono gli elementi dello pseudo-in CSS

Gli elementi degli pseudo sono parole chiave che vengono utilizzate per modellare una parte particolare di un elemento specificato. Questi sono inseriti in un selettore quando lo styling elementi. Ad esempio, vuoi dare un po 'di colore alla prima lettera di un elemento o vuoi aggiungere un po' di testo prima di un determinato elemento.

Sintassi

selettore :: pseudo-element
costo dell'immobile;

Qui abbiamo messo in evidenza alcuni degli importanti pseudo-elementi per la tua migliore comprensione.

::prima lettera

Questo viene usato per dare un certo stile alla prima lettera di un po 'di testo, inoltre, viene applicato solo sugli elementi a livello di blocco. Supporta molte proprietà CSS come colore, carattere, margine, bordo, imbottitura, sfondo, ecc.

Esempio

Segui il codice qui sotto per capire come funziona questo elemento.

Html

Pseudo-elementi

Qui abbiamo definito un

elemento.

CSS

H1 :: First-Letter
Colore: SandyBrown;
Font in stile: corsivo;
Font-size: 50px;

Stiamo dando il colore SandyBrown, lo stile del carattere in corsivo e la dimensione del carattere 50px alla prima lettera dell'intestazione usando lo pseudo-elemento :: First-letter.

Produzione

La prima lettera dell'intestazione è stata disegnata usando lo pseudo-elemento :: First-letter.

::prima linea

Come suggerisce il nome, questo viene utilizzato per dare un po 'di stile alla prima riga di un testo, inoltre è applicabile solo agli elementi a livello di blocco. Supporta alcune proprietà CSS che sono colore, carattere, sfondo, ecc.

Esempio

Supponiamo di voler dare un po 'di colore, stile e peso alla prima linea di a

elemento. Segui il codice qui sotto.

Html

Come suggerisce il nome, questo pseudo-elemento viene utilizzato per lo styling della prima riga di un testo. Questo elemento può anche essere applicato agli elementi a livello di blocco. Supporta alcune proprietà CSS che sono colore, carattere, sfondo, ecc.

Nel codice sopra abbiamo definito a

elemento e aggiunto un po 'di testo in esso.

CSS

P :: Prima linea
colore viola;
Font in stile: corsivo;
Font-weight: audace;

Usando lo pseudo-elemento di prima linea stiamo dando un po 'di colore, in stile font e po' di carattere alla prima riga del paragrafo solo.

Produzione

La prima linea del paragrafo è stata disegnata con successo.

::Prima

Ai fini dell'aggiunta di contenuti prima di una certa parte di un elemento, viene utilizzato il :: prima dello pseudo-elemento. Supporta la proprietà del contenuto CSS.

Esempio

Supponiamo di voler aggiungere virgolette all'inizio di un paragrafo. Usa il seguente codice.

Html

Questo è un po 'di paragrafo.

Qui stiamo definendo il nostro paragrafo prima del quale tutti aggiungiamo un marchio di citazione.

CSS

p :: prima
contenuto: '"';
colore blu;
Font-size: 25px;

Nel codice sopra, stiamo aggiungendo un segno di citazione prima del paragrafo e dandogli il colore blu e stabilendo le sue dimensioni su 25px usando il :: prima dello pseudo-elemento.

Produzione

Il segno della citazione è stato aggiunto con successo usando il :: prima dello pseudo-elemento.

::Dopo

Funziona in modo simile a :: prima dello pseudo-elemento, con l'unica differenza che inserisce il contenuto dopo una certa parte di un elemento. Questo elemento viene anche utilizzato con la proprietà del contenuto CSS.

Esempio

Segui l'esempio seguente per comprendere il funzionamento di :: After Pseudo-Element.

Html

Fogli di stile

Qui abbiamo specificato un

elemento e aggiunto alcuni contenuti ad esso.

CSS

H1 :: dopo
Contenuto: '(pseudo-elementi)';
colore blu;
Font-size: 15px;

Stiamo aggiungendo determinati contenuti dopo il

elemento, dando quel particolare colore blu contenuto e impostando la sua dimensione del carattere su 15px.

Produzione

Il contenuto è stato aggiunto dopo l'intestazione.

::selezione

Per modellare un elemento che un utente seleziona, viene utilizzato lo pseudo-elemento :: selezione. Supporta alcune proprietà CSS che sono colore, sfondo, ecc.

Esempio

Supponiamo che tu voglia che un determinato elemento venga evidenziato quando un utente lo seleziona. Segui il codice qui sotto.

Html

Alcuni intestati

Qui stiamo specificando un'intestazione.

CSS

H1 :: Selezione
Background-color: hotpink;

Nel codice sopra, stiamo usando lo pseudo-elemento :: Selezione per dare un colore rosa ogni volta che l'utente lo seleziona.

Produzione

Lo pseudo-elemento di selezione :: Selezione funziona correttamente.

Conclusione

Gli elementi degli pseudo sono parole chiave che vengono utilizzate per modellare una parte particolare di un elemento specificato. Esistono vari pseudo-elementi nei CSS, tuttavia, alcuni degli pseudo-elementi più importanti e comunemente usati sono; ::prima lettera, ::prima linea, ::Prima, ::Dopo, E ::selezione. Ognuno di questi viene utilizzato per diversi scopi di styling che è spiegato in dettaglio in questo post insieme all'aiuto di esempi adeguati.