Gli pseudo-elementi sono uno dei selettori più avanzati disponibili per l'uso nei CSS. Lo scopo principale di questi selettori è creare uno stile unico, senza alterare il documento HTML utilizzato per creare la struttura di base di una data pagina web.

Ecco come utilizzare gli pseudo-elementi nei CSS.

Pseudo-elementi comuni

Esiste un ampio elenco di pseudo-elementi disponibili per semplificare la vita di uno sviluppatore web. Alcuni di questi pseudo-elementi includono:

• Prima
• Dopo
• Sfondo
• Prima linea
• Prima lettera

In situazioni specifiche, alcuni pseudo-elementi si dimostreranno più adatti di altri, ma l'unica cosa che rimane costante è la struttura generale per l'utilizzo di qualsiasi pseudo-elemento.

Esempio di struttura di pseudo-elementi

selettore:: pseudo-elemento {
/ * codice css * /
} 

Anche se puoi usa un elemento HTML come selettore, si consiglia di utilizzare una classe o un ID per evitare di prendere di mira elementi non intenzionali nel layout. L'elemento, lo stile o i dati che desideri inserire nella posizione desiderata devono essere inseriti tra le parentesi graffe.

Gli pseudo-elementi prima e dopo sono i più popolari nell'elenco e, dato che ci sono molti modi pratici per usarli, non è difficile capire perché.

Utilizzando il Before Pseudo-elemento in CSS

Sebbene non sia impossibile, è difficile sovrapporre immagini con testo leggibile in CSS. Ciò è principalmente dovuto al fatto che l'immagine e il testo occuperebbero la stessa posizione su una pagina web.

È relativamente facile invia un'immagine sullo sfondo di un gruppo di testo, ma quando l'immagine è troppo luminosa tende a sopraffare il testo che si trova sopra di essa. In questi casi, il passaggio successivo consiste nel tentare di rendere l'immagine meno opaca utilizzando la proprietà opacità.

L'unico problema è che poiché l'immagine e il testo occupano la stessa posizione, anche il testo diventerà un po 'trasparente.

Uno dei pochi modi efficaci per risolvere questo problema è usare lo pseudo-elemento before.

Utilizzo dell'esempio dello pseudo-elemento Before

.pagina di destinazione{
/ * Dispone il testo sulla sovrapposizione dell'immagine * /
display: flex;
flex-direction: colonna;
giustificare-contenuto: centro;
elementi di allineamento: centro;
text-align: center;
/ * imposta la pagina per adattarsi alle diverse dimensioni dello schermo * /
altezza: 100vh;
}
.landingPage:: before {
soddisfare:'';
/ * importa un'immagine * /
background: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
centro / copertura senza ripetizioni;
/ * posiziona una sovrapposizione sopra l'immagine * /
opacità: 0,4;
/ * rende l'immagine visibile * /
posizione: assoluta;
in alto: 0;
sinistra: 0;
larghezza: 100%;
altezza: 100%;
}

Il codice sopra è stato creato per essere utilizzato all'unisono con la classe HTML landingPage di seguito. Come mostrato nel codice sopra, usando lo pseudo-elemento before possiamo scegliere come target l'immagine e usare la proprietà opacity su di essa prima che l'immagine venga combinata con il testo.

Utilizzo dello pseudo-elemento Before


Questo è il risultato dell'utilizzo dello pseudo-elemento before
per sovrapporre e creare immagini con testo leggibile.

Ciò comporterà il posizionamento di una sovrapposizione sull'immagine e il testo in chiaro visualizzato in alto, come mostrato nell'immagine seguente:

Utilizzando lo pseudo-elemento After in CSS

Un utilizzo pratico per lo pseudo-elemento after è quello di aiutare nella creazione di un modulo HTML. La maggior parte dei moduli vengono creati con una serie di campi che richiedono dati per il corretto invio del modulo.

Un modo per indicare che un campo in un modulo richiede dati è inserire un asterisco dopo l'etichetta per questo campo. Lo pseudo-elemento after fornisce un modo pratico per farlo.

Utilizzo dell'esempio dello pseudo-elemento After

.required:: dopo {
contenuto: '*';
colore rosso;
} 

Inserendo il codice sopra nella sezione CSS del tuo modulo assicurerai che ogni etichetta che contiene la classe richiesta sarà seguita direttamente da un asterisco rosso. Lo pseudo-elemento after è anche pratico in questo esempio perché aiuta a separare lo stile dalla struttura (che è sempre l'ideale nello sviluppo del software).

La proprietà del contenuto

Come mostrato nell'esempio di pseudo-elemento dopo sopra, la proprietà content è lo strumento utilizzato per inserire nuovo contenuto in una pagina web. Questa proprietà viene utilizzata solo con gli pseudo-elementi prima e dopo.

È importante notare che anche se non è disponibile alcun contenuto da inserire nella proprietà content (come nell'esempio di pseudo-elemento precedente sopra), è ancora necessario utilizzare la proprietà content all'interno dei parametri dello pseudo-elemento prima o dopo per farli funzionare come previsto.

Ora puoi usare pseudo-elementi in CSS

In questo articolo hai imparato come identificare e utilizzare gli pseudo-elementi nei tuoi programmi CSS. Sei stato introdotto agli pseudo-elementi prima e dopo e ti sono stati dati modi pratici per usarli entrambi. Sei stato anche in grado di vedere perché la proprietà del contenuto è necessaria per il corretto utilizzo degli pseudo-elementi prima e dopo.

10 semplici esempi di codice CSS che puoi imparare in 10 minuti

Vuoi saperne di più sull'uso dei CSS? Prova questi esempi di codice CSS di base per iniziare, quindi applicali alle tue pagine web.

Leggi Avanti

Circa l'autore