Propriedade content

A propriedade content permite inserir texto gerado arbitrariamente em tags. É aplicada em conjunto com os pseudoelementos after e before.

Sintaxe

cssseletor::after {
  content: 'texto';
}

cssseletor::before {
  content: 'texto';
}

Exemplo

Vamos inserir texto adicional no início e no final do texto da tag li:

html<ul>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
</ul>

cssli::before {
  content: '!!!';
}
li::after {
  content: '???';
}

Результат:

Exemplo

É possível aplicar vários estilos ao texto inserido. Vamos colorir este texto, por exemplo, com alguma cor:

html<ul>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
</ul>

cssli::before {
  color: red;
  content: '!!!';
}
li::after {
  color: green;
  content: '???';
}

Результат:

Veja também