Esercizi Pseudo Elementi CSS

Edoardo Midali

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>