[CSS] 使用 attr() 將標籤上的屬性值帶入樣式的偽元素

分享:
CSS

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 變數帶入。

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。