Home-theater-designers
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 determinata pagina web.
Ecco come utilizzare gli pseudo-elementi nei CSS.
il mio tappetino per il mouse non funziona
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
selector::pseudo-element{
/* css code */
} Sebbene sia possibile utilizzare un elemento HTML come selettore , si consiglia di utilizzare una classe o un id per evitare di scegliere come target elementi indesiderati nel layout. L'elemento, lo stile oi dati che si desidera 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é.
Utilizzo dello pseudo-elemento Before nei CSS
Sebbene non sia impossibile, è difficile sovrapporre le immagini con testo leggibile in CSS. Ciò è dovuto principalmente 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 quell'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à in qualche modo trasparente.
Uno dei pochi modi efficaci per risolvere questo problema è utilizzare lo pseudo-elemento before.
Utilizzo dell'esempio prima dello pseudo-elemento
.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Il codice sopra è stato creato per essere utilizzato all'unisono con la classe landingPage sottostante. Come mostrato nel codice sopra, utilizzando lo pseudo-elemento before possiamo scegliere come target l'immagine e utilizzare la proprietà di opacità su di essa prima che l'immagine venga combinata con il testo.
This is the result of using the before pseudo-element
to overlay and image with readable text.
Ciò comporterà l'inserimento di una sovrapposizione sull'immagine e la visualizzazione di un testo chiaro nella parte superiore, come mostrato nell'immagine seguente:
Utilizzo dello pseudo-elemento After nei CSS
Un uso pratico dello pseudo-elemento after è aiutare nella creazione di un modulo HTML. La maggior parte dei moduli viene creata con una serie di campi che richiedono dati per l'invio corretto del modulo.
Un modo per indicare che un campo in un modulo richiede dati consiste nell'apporre un asterisco dopo l'etichetta per questo campo. Lo pseudo-elemento after fornisce un modo pratico per farlo.
Utilizzo dell'esempio dopo lo pseudo-elemento
.required::after{
content: '*';
color: red;
} 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. Anche lo pseudo-elemento after è pratico in questo esempio perché aiuta a separare lo stile dalla struttura (che è sempre l'ideale nello sviluppo del software).
come verificare se l'iPhone ha virus
La proprietà del contenuto
Come mostrato nell'esempio dello pseudo-elemento after sopra, la proprietà del contenuto è 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 inviare alla proprietà del contenuto (come nell'esempio precedente dello pseudo-elemento precedente), è comunque necessario utilizzare la proprietà del contenuto all'interno dei parametri del prima o del dopo pseudo-elemento per farli funzionare come previsto.
Ora puoi usare gli pseudo-elementi nei CSS
In questo articolo hai imparato come identificare e utilizzare gli pseudo-elementi nei tuoi programmi CSS. Ti sono stati presentati gli pseudo-elementi prima e dopo e ti sono stati dati dei modi pratici per usarli entrambi. Hai anche potuto vedere perché la proprietà del contenuto è necessaria per l'uso corretto degli pseudo-elementi prima e dopo.
Condividere Condividere Tweet E-mail 10 semplici esempi di codice CSS che puoi imparare in 10 minutiHai bisogno di aiuto con i CSS? Prova questi esempi di codice CSS di base per iniziare, quindi applicali alle tue pagine web.
Leggi Avanti Argomenti correlati- Programmazione
- Web design
- CSS
Kadeisha Kean è uno sviluppatore software full-stack e scrittore tecnico/tecnologico. Ha la spiccata capacità di semplificare alcuni dei concetti tecnologici più complessi; producendo materiale che può essere facilmente compreso da qualsiasi principiante della tecnologia. È appassionata di scrivere, sviluppare software interessanti e viaggiare per il mondo (attraverso documentari).
Altro da Kadeisha KeanIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti