Sintassi

Significato dei valori principali:

• stringa: inserisce una stringa di testo, es. "Nota:".

• url(): inserisce un'immagine da un URL specificato.

• attr(nome): inserisce il valore di un attributo dell’elemento, ad esempio attr(title).

• open-quote / close-quote: inserisce virgolette tipografiche secondo la lingua/locale.

• none: nessun contenuto generato.

Esempio proprietà: content

Codice Esempio: content

CODE: CSS

1. .content-example::before {

2.   content: "👉 ";

3.   color: #e06c75;

4.   font-size: 20px;

5. }

7. .content-example::after {

8.   content: " ✔";

9.   color: #98c379;

10.   font-size: 20px;

11. }

13. .content-example {

14.   font-size: 18px;

15.   padding: 10px;

16.   background-color: #f0f0f0;

17.   border-radius: 6px;

18. }

Contenuto Esempio: content

  
  <style>
    .content-example::before {
      content: "👉 ";
      color: #e06c75;
      font-size: 20px;
    }

    .content-example::after {
      content: " ✔";
      color: #98c379;
      font-size: 20px;
    }

    .content-example {
      font-size: 18px;
      padding: 10px;
      background-color: #f0f0f0;
      border-radius: 6px;
    }
  </style>

  <p class="content-example">Questo paragrafo usa la proprietà <code>content</code>.</p>
  

Nota:
gli pseudoelementi si scrivono con due due punti (::) per distinguere meglio da pseudoclassi (:), anche se alcuni browser supportano ancora la notazione con uno solo (:before, :after...).

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser