Exemplo
O exemplo a seguir insere o URL entre parênteses após cada link:
a:after
{
content: " (" attr(href) ")";
}
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade de conteúdo é usado com a: before e: after pseudo-elementos, para inserir o conteúdo gerado.
| Valor padrão: | normal |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS2 |
| sintaxe JavaScript: | You can't give an element a pseudo-class by using JavaScript, but there are other ways to get the same result: Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| content | 1.0 | 8 | 1.0 | 1.0 | 4.0 |
Note: IE8 suporta apenas a propriedade de conteúdo se um DOCTYPE é especificado!.
CSS Syntax
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;Valores de propriedade
| Valor | Descrição | Exemplo |
|---|---|---|
| normal | Valor padrão. Define o conteúdo, se especificado, ao normal, o que o padrão é "none" (which is nothing) | Try it » |
| none | Define o conteúdo, se especificado, para nada | Try it » |
| counter | Define o conteúdo como um contador | Try it » |
| attr (attribute) | Define o conteúdo como um dos selector's atributo | Try it » |
| string | Define o conteúdo para o texto que você especificar | Try it » |
| open-quote | Define o conteúdo para ser uma citação de abertura | Try it » |
| close-quote | Define o conteúdo para ser uma cotação de fechamento | Try it » |
| no-open-quote | Remove a citação de abertura a partir do conteúdo, se especificado | Try it » |
| no-close-quote | Remove a cotação de fechamento do conteúdo, se especificado | Try it » |
| url( url ) | Define o conteúdo para ser algum tipo de media (an image, a sound, a video, etc.) | Try it » |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Exemplo
Como adicionar cores de bala para <ul> ou <ol> removendo suas balas padrão e adicionando uma entidade HTML que se parece com balas (•) :
ul {
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li:before {
content: "•"; /* Insert content that
looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
} Tente você mesmo " Páginas relacionadas
Referência CSS: : antes elemento pseudo
Referência CSS: : após elemento pseudo