Função attr

A função attr permite obter em CSS o valor de um atributo de uma tag HTML.

Sintaxe

cssseletor {
  propriedade: attr(nome, tipo, valor);
}

Parâmetros

Parâmetro Descrição
nome O nome do atributo do elemento passado para o CSS.
tipo O tipo de valor da propriedade CSS. As seguintes palavras-chave são permitidas: string (string), color (cor), url (endereço web), integer (número inteiro), number (número real), angle (ângulo), time (tempo), deg (grau), assim como unidades CSS como em, px e outras.
valor O valor que será usado caso o atributo não exista ou o navegador não possa obtê-lo.

Exemplo

Vamos exibir o valor do atributo href de um link entre parênteses após seu texto:

html<a href="http://google.com">link</a>
cssa::after {
  content: ' (' attr(href) ')';
}

Результат:

Veja também

  • a propriedade content,
    que permite adicionar texto aos elementos
  • o pseudoelemento before,
    que faz a inserção antes do texto da tag
  • o pseudoelemento after,
    que faz a inserção após o texto da tag