Manual de Referência CSS

Regras CSS (RULES)

大全 de Atributos CSS

CSS counter-Atributo increment CSS3 Atributo columns

Métodos de uso e exemplos da propriedade content CSS

Propriedade content CSS e ::before e ::afterElemento pseudoUsado em combinação para gerar o conteúdo do elemento.

A tabela a seguir fornece uma descrição de uso e histórico de versões deste atributo, bem como a sintaxe de uso no script JavaScript.

Valor padrão:	normal
Aplicável a:	::before e ::after Elemento pseudo
Herança:	Nenhum
Animável:	Não.Veja também Atributos de animação.
Versão:	CSS 2、3
Sintaxe JavaScript:	object.style.content="counter"

Sintaxe de uso do content

A sintaxe deste atributo é a seguinte:

content: normal | none | counter | string | url(url) | attr(attribute) | open-quote | close-quote | no-open-quote | no-close-quote | initial | inherit

O exemplo a seguir demonstra como usar a propriedade content.

Exemplo

　　h1::before {
　　　content: "Capítulo: ";
　　　display: inline;
　　}

Teste para ver‹/›

Nota:display A propriedade CSS controla se o conteúdo gerado pelo atributo content é colocado em um bloco ou em um bloco inline.

Valor da propriedade

A tabela a seguir descreve os valores dessa propriedade.

Valor	Descrição
normal	para :before e :after Elemento pseudoEle não calcula nenhum valor. Este é o valor padrão.
none	referidoElemento pseudoNão gera.
counter	Este valor define content como contador. Para mais informações, consultecounter-resetecounter-incrementatributo.
串	Insira a string especificada (conteúdo de texto).
url(url)	O valor url() especifica recursos externos (por exemplo, imagens). Se o recurso ou a imagem não puder ser exibida, será ignorado ou exibido alguns placeholders.
attr(attribute)	Essa função insere o valor especificado do atributo antes ou depois do elemento selecionado. Se o tema do seletor não tiver o atributo especificado, uma string vazia será inserida. Nota: 　 O nome do atributo não deve ser colocado entre aspas.
open-quote	Insira a aspa esquerda. Esses valores serão substituídos pela string apropriada da propriedade quotes.
close-quote	Insira a aspa direita. Esses valores serão substituídos pela string apropriada da propriedade quotes.
no-open-quote	Não exibe a aspa inicial, mas aumenta (diminui) o nível de nesting da aspa.
no-close-quote	Não exibe a aspa direita, mas aumenta (diminui) o nível de nesting da aspa.
initial	Defina essa propriedade como seu valor padrão.
inherit	Se especificado, o elemento relacionado adota o valor da propriedade content do pai.

Compatibilidade do navegador

Compatibilidade do navegador do atributo content, os números na tabela a seguir representam a versão mínima do navegador que suporta a propriedade; todos os navegadores populares suportam essa propriedade.

	Firefox 1+ Google Chrome1+ Internet Explorer 8+ Apple Safari 1+ Opera 4+

Aviso: Internet Explorer 7e versões mais antigas não suportam a propriedade content. IE8ApenasSomente suportado quando especificado um valor válido.