CSSのattr関数は対象の要素のHTMLタグの属性の値を受け取る事ができ、その値をスタイルシートの中で使うことが出来ます。
一般的には::beforeや::afterの疑似要素と使われることが多いです。次の章で使い方を確認しましょう。
上記のサンプルコードではHTMLタグのdiv要素に付与しているdata-label属性の値をattr関数で読み取り、contentプロパティで、::beforeの疑似要素で表示させています。
上記のサンプルコードでは今度はHTMLタグのdiv要素に付与しているtitle属性の値を同様にattr関数で読み取り、疑似要素のcontentプロパティで表示させています。
attr関数はサポートブラウザを考えるとcontentプロパティでのみ利用するようにしましょう。（一応どのプロパティでも使える関数ですが、contentプロパティ以外はほとんどのブラウザで動かないです）