attrは属性という意味のattribute（アトリビュート）を省略したものみたいです。
普段プロパティや関数名などを口に出して言うことがあまりないので正確な読みを知らないものも多く、attrは心の中でずっと「あたらー」と読んでいました。
アトリビュートとさらっと言えたらかっこいいと思います！
attr()はjavascriptを使わずにHTMLからデータを取得することができます。
content: attr(属性);
上記のようにcontentプロパティで使用することができ、herf,title,dataなどの属性を取得できます。
下のサンプルでは ①画像のキャプション ②ナビゲーションの日本語表記 ③背景文字 ④投稿日時をattr()で表示させています。
See the Pen
attr() by kushi (@kushi95)
on CodePen.
attr()が便利な場面で言うと、同じレイアウトだけど背景で呼び出している画像がページまたは番号によって変えている場合があげられます。
変更がある度に該当箇所のcssを書き換える必要がありましたが、このattr()を使えばHTML側を書き換えてあげればよいので変更が楽になりcssのコード量も減らせます。
有効な場面で使ってあげればとても便利なアトリビュートでした。