CSS - conteúdo

Descrição

A propriedade content define o conteúdo a ser inserido nas operações de conteúdo gerado. Esta propriedade é usada junto com: before ou: after pseudoelementos.

Valores possíveis

string- Qualquer valor de string permitido. Isso sempre está entre aspas.
URI - Um ponteiro para um recurso externo, como uma imagem.
counter- Existem duas formas possíveis deste valor: contador (nome, estilo?) E contadores (nome, string,? Estilo?). Em ambos os casos, o conteúdo será o valor do contador nomeado naquele ponto do documento, renderizado no valor de estilo opcional (decimal por padrão). No caso de contadores (...), o valor de string opcional indica uma string para seguir cada instância do contador nomeado.
attr(X)- Provoca a inserção do valor do atributo X para o assunto do seletor. Por exemplo, é possível exibir o valor do atributo alt de uma imagem usando este valor.
open-quote - Faz com que a inserção da string apropriada especificada usando as aspas de propriedade.
close-quote - Faz com que a inserção da string apropriada especificada usando as aspas de propriedade.
no-open-quote- Impede a inserção da string apropriada especificada usando as aspas de propriedade. No entanto, o nível de aninhamento das aspas ainda é aumentado.
no-close-quote- Impede a inserção da string apropriada especificada usando as aspas de propriedade. No entanto, o nível de aninhamento das aspas ainda é reduzido.

Aplica-se a

: antes e: depois dos pseudo-elementos.

Sintaxe DOM

object.style.content = "url(home.avi)"

Exemplo

A seguir está o exemplo que demonstra como usar : before element para adicionar algum conteúdo antes de qualquer elemento.

<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

Isso produzirá o seguinte link preto -

A seguir está o exemplo que demonstra como usar : após o elemento para adicionar algum conteúdo após qualquer elemento.

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

Isso produzirá o seguinte link preto -

↰ Previous page