Javascript Css Dopo

| | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Il selettore CSS::before inserisce il contenuto prima di un elemento selezionato. CSS:after inserisce il contenuto dopo un elemento specificato. Questi selettori sono comunemente usati per aggiungere del testo prima o dopo un paragrafo o un collegamento.

Quando stai progettando un sito web, potresti voler aggiungere del contenuto prima o dopo il contenuto di un appare l’elemento. Ad esempio, potresti voler aggiungere un’immagine prima di ogni punto elenco in un elenco.

Ecco dove entrano in gioco gli pseudo-elementi CSS::before e::after. Questi pseudo-elementi ti consentono di inserire contenuto prima o dopo il contenuto di un elemento.

Questo tutorial discuterà, con riferimento ad esempi, come utilizzare gli pseudo-elementi::before e::after per decorare il contenuto di una pagina web. Alla fine della lettura di questo tutorial, sarai un esperto nell’utilizzo degli pseudo-elementi::before e::after nei CSS.

Pseudo-Elementi CSS

Uno pseudo-elemento è una parola chiave speciale che ti permette di dare uno stile a una parte specifica degli elementi selezionati da un selettore CSS. In questo articolo faremo riferimento agli pseudo-elementi come selettori perché ogni pseudo-elemento è un selettore.

Gli pseudo-elementi sono utili quando vuoi applicare uno stile a un elemento senza aggiungere classi CSS o ID all’elemento. Ad esempio, se desideri aggiungere un ">" freccia dopo ogni link su una pagina web, potresti usare uno pseudo-elemento.

CSS offre una vasta gamma di pseudo-elementi. Questi includono::first-line,::first-letter,::before e::after. Ai fini di questo tutorial, ci concentreremo sugli ultimi due:::prima e::dopo.

Gli pseudo-elementi sono tipicamente rappresentati usando i due punti (::). Sebbene i CSS3 supportino l’uso della sintassi con un solo punto (:) per dichiarare uno pseudo-elemento, l’uso della notazione con due punti è la migliore pratica.

Questo perché la notazione a due punti è usata per distinguere le pseudo-classi dagli pseudo-elementi.

CSS::before Pseudo-Element

Il::before pseudo- l’elemento aggiunge contenuto che appare prima di un elemento in una pagina Web. Spesso, questo elemento viene utilizzato per aggiungere del testo prima di un paragrafo.

La sintassi dello pseudo-elemento::before è:

Il selettore::before è aggiunto dopo il nome dell’elemento a cui si desidera applicare il selettore.

Ecco i componenti principali dello pseudo-elemento::before:

Se sei interessato a saperne di più su come funzionano i selettori in CSS, leggi la nostra guida a Selettori CSS.

Facciamo un esempio per dimostrare come funziona lo pseudo-elemento::before.

Supponiamo di voler aggiungere un collegamento emoji (Ôîó) prima di ogni collegamento in una pagina web di esempio. Potremmo svolgere questo compito utilizzando il seguente codice:

Il nostro codice restituisce:

Screenshot dal 2020 12 09 08 00 16

Nel nostro file HTML, abbiamo definito un HTML e lt;a> tag che collega alla home page di Python.Engineering. Quindi, nel nostro file CSS, abbiamo utilizzato lo pseudo-elemento::before per aggiungere l’emoji del collegamento prima di ogni tag sulla nostra pagina web.

Ci siamo riusciti specificando una proprietà di contenuto nel nostro file CSS, che assomiglia a questa:

content: "Ôîó";

La nostra regola ha aggiunto un’emoji di collegamento all’inizio del nostro tag che abbiamo creato.

Il valore per l’attributo "content" può essere:

Non puoi inserire un elemento HTML nell’attributo content.

Il CSS::after Pseudo-Element

Lo pseudo-elemento CSS::after permette di aggiungere contenuto immediatamente dopo un elemento su una pagina Web. Come il selettore::before,::after viene spesso utilizzato con collegamenti o paragrafi di testo.

Th La sintassi dello pseudo-elemento::after è la seguente:

La sintassi per::after è la stessa della sintassi per lo pseudo-elemento::before.::after accetta gli stessi valori per il "contenuto" attributo di cui abbiamo discusso in precedenza.

::after CSS Esempio

Supponiamo di progettare un elemento di collegamento su un sito web per una panetteria chiamata Hansons Bakery. Questo collegamento dovrebbe visualizzare il testo "Vai alla homepage di Hansons Bakery." Il nostro collegamento dovrebbe essere circondato da un bordo nero pieno largo 1 pixel.

Dopo la nostra etichetta, vogliamo che appaia una casella di testo con il contenuto Questa pagina mostra il nostro menu di prodotti da forno. (Nota lo spazio bianco prima della parola "Questo" .) La nostra casella dovrebbe avere un colore di sfondo HTML arancione.

Potremmo svolgere questo compito utilizzando il seguente codice:

Il nostro codice ha generato un contenuto simile a questo:

Screenshot dal 2020 12 09 08 00 47 1

Nel nostro codice, abbiamo definito un collegamento alla nostra home page utilizzando un etichetta. Il nome della classe associato al nostro collegamento è .label.

Nel nostro file CSS, abbiamo applicato un bordo nero solido largo 1 pixel attorno a ogni elemento con il nome della classe .label.

Quindi, abbiamo usato il::dopo il selettore per creare la casella di testo descritta in precedenza. La casella di testo mostra il contenuto "Questa pagina mostra il nostro menu di prodotti da forno." La nostra casella ha uno sfondo arancione.

Conclusione

Gli pseudo-elementi::before e::after ti consentono di aggiungere contenuto a una parte specifica di un elemento selezionato in una regola CSS. Ad esempio, il selettore::before potrebbe essere utilizzato per aggiungere del testo prima di un collegamento. Il selettore::after può essere usato per aggiungere un’emoji dopo un paragrafo di testo.

Questo tutorial ha discusso, con riferimento ad esempi, le basi degli pseudo-elementi nei CSS e come usare gli pseudo-elementi::before e::after. Ora sei pronto per iniziare a utilizzare gli pseudo-elementi::before e::after nel tuo codice CSS come un web designer professionista.

Per consigli sulle migliori risorse di apprendimento, libri e corsi per sviluppatori web CSS. , consulta la nostra Guida all’apprendimento dei CSS.