Home esercizi css pseudoelementi

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>