attr() 是 CSS 一個可以直接抓取標籤上的值的一個方法,比如說有一個 HTML 長這樣:

<div data-content="some content">
</div>

樣式寫這樣的話

div::after {
  content: attr(data-content);
}

就會看到標籤內的偽元素內容會跟 data-content 裡的值一樣,在 CSS 可以用此方法抓任意的標籤的內容,不過目前是還只有偽元素的 content 可以用。

所以如果像這樣寫就是無效的

h2 {
  color: attr(data-color);
}

如果有想要抓變動比較大的內容,目前還是建議用原生的 CSS 變數帶入。