Funzione attr() CSS

La funzione attr() è utilizzata nella proprietà content, mediante la quale è possibile ottenere diverse tipologie di visualizzazione.

Ad esempio considerando di avere i seguenti link:

Codice HTML

<p>
  <a href="https://www.ilblogdiunprogrammatore.it">
    Visita il sito ilblogdiunprogrammatore.it
  </a>
</p>
<p>
  <a href="https://www.facebook.com/defalcomic">
    Profilo facebook di Michele De Falco
  </a>
</p>

e vogliamo far apparire subito dopo il link il valore dell'attributo href, per fare questo basta usare la seguente proprietà css:

Codice CSS

a[href]:after {
  content: "[" attr(href) "]";
  color: green;
}
a {
  color: #000;
}

e il risultato è questo:

Se volessi personalizzare il contenuto da far apparire dopo una determinata voce, torna utile in questo caso l'attributo data, ad esempio abbiamo i seguenti paragrafi:

Codice HTML

<p data-message="https://www.ilblogdiunprogrammatore.it">
  Visita il sito ilblogdiunprogrammatore.it
</p>

<p data-message="https://www.facebook.com/defalcomic">
  Il mio profilo facebook
</p>

utilizzando il seguente stile:

Codice CSS

p:after {
  content: attr(data-message);
  color: green;
}

si ottiene questo risultato

cioè visualizziamo dopo il paragrafo il valore di data-message.

Con la funzione attr() possiamo anche creare un semplice tooltip al passaggio del mouse su un elemento html, ad esempio consideriamo di avere un link come quello in precedenza:

Codice HTML

<a href="https://www.ilblogdiunprogrammatore.it"
  data-tooltips="https://www.ilblogdiunprogrammatore.it"
  class="tooltips">Visita il sito ilblogdiunprogrammatore.it</a>

utilizzanto i seguenti stile css:

Codice CSS

a.tooltips {
  position: relative;
}

a.tooltips:hover:after {
  border: 1px solid #fc0;
  color: #000;
  padding: 5px;
  background: #fffea1;
  content: attr(data-tooltips);
  position: absolute;
  left: 0;
  bottom: -45px;
}

si ottiene questo risultato