Esercizi Pseudo Elementi CSS
Metti alla prova le tue competenze nell’utilizzo dei pseudoelementi in CSS per stilizzare parti specifiche di un elemento HTML. Allenati nell’uso di pseudoelementi come “::before” e “::after” per aggiungere contenuti extra e dettagli stilistici.
Esercizio 1
Crea una pagina HTML con un paragrafo. Utilizza un pseudo-elemento CSS per aggiungere un puntino alla fine del testo del paragrafo.
<!DOCTYPE html><html> <head> <title>Esercizio 1</title> <style> p::after { content: "."; } </style> </head> <body> <p>Questo è un esempio di testo</p> </body></html>
Esercizio 2
Crea una pagina HTML con un titolo. Utilizza un pseudo-elemento CSS per aggiungere una riga al di sotto del titolo.
<!DOCTYPE html><html> <head> <title>Esercizio 2</title> <style> h1::after { content: ""; display: block; border-bottom: 1px solid black; } </style> </head> <body> <h1>Titolo</h1> </body></html>
Esercizio 3
Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Utilizza un pseudo-elemento CSS per aggiungere delle virgole tra gli elementi della lista.
<!DOCTYPE html><html> <head> <title>Esercizio 3</title> <style> li:not(:last-child)::after { content: ", "; } </style> </head> <body> <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <!-- Aggiungi altri elementi <li> qui --> </ul> </body></html>
Esercizio 4
Crea una pagina HTML con un paragrafo. Utilizza un pseudo-elemento CSS per aggiungere un'icona di freccia destra all'inizio del testo del paragrafo.
<!DOCTYPE html><html> <head> <title>Esercizio 4</title> <style> p::before { content: "\2192"; margin-right: 5px; } </style> </head> <body> <p>Questo è un esempio di testo</p> </body></html>
Esercizio 5
Crea una pagina HTML con un link. Utilizza un pseudo-elemento CSS per aggiungere un'icona di link esterno all'inizio del link.
<!DOCTYPE html><html> <head> <title>Esercizio 5</title> <style> a::before { content: "\2794"; margin-right: 5px; } </style> </head> <body> <a href="#">Link esterno</a> </body></html>
Esercizio 6
Crea una pagina HTML con un paragrafo. Utilizza un pseudo-elemento CSS per aggiungere una linea verticale di separazione tra il testo del paragrafo.
<!DOCTYPE html><html> <head> <title>Esercizio 6</title> <style> p::after { content: ""; display: inline-block; width: 1px; height: 1em; background-color: black; margin-left: 5px; vertical-align: middle; } </style> </head> <body> <p>Testo con una linea verticale di separazione</p> </body></html>
Esercizio 7
Crea una pagina HTML con un paragrafo. Utilizza un pseudo-elemento CSS per aggiungere uno sfondo colorato al testo del paragrafo.
<!DOCTYPE html><html> <head> <title>Esercizio 7</title> <style> p::before { content: ""; display: block; width: 100%; height: 100%; background-color: yellow; position: absolute; z-index: -1; } </style> </head> <body> <p>Questo è un esempio di testo con sfondo colorato</p> </body></html>
Esercizio 8
Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Utilizza un pseudo-elemento CSS per aggiungere delle virgole e un punto esclamativo alla fine della lista.
<!DOCTYPE html><html> <head> <title>Esercizio 8</title> <style> ul::after { content: ", "; }
li:last-child::after { content: "!"; } </style> </head> <body> <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <!-- Aggiungi altri elementi <li> qui --> </ul> </body></html>
Esercizio 9
Crea una pagina HTML con un link. Utilizza un pseudo-elemento CSS per aggiungere un'icona di link esterno alla fine del link.
<!DOCTYPE html><html> <head> <title>Esercizio 9</title> <style> a::after { content: "\2794"; margin-left: 5px; } </style> </head> <body> <a href="#">Link esterno</a> </body></html>
Esercizio 10
Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Utilizza un pseudo-elemento CSS per aggiungere delle parentesi graffe intorno a ogni elemento della lista.
<!DOCTYPE html><html> <head> <title>Esercizio 10</title> <style> li::before { content: "{ "; }
li::after { content: " }"; } </style> </head> <body> <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <!-- Aggiungi altri elementi <li> qui --> </ul> </body></html>