使用 Vue 設定偽元素 content

發表於 2024-09-03 更新於 2024-11-08 分類於 Front-end

Vue 從模板傳值到 CSS 偽元素 content 內容

使用 Attr()

首先在模板定義data-*參數，並使用 Vue 模板傳入對應值

1	<div class="dh-header" :data-title="data.title"></div>

然後在 CSS 中使用attr()引入自訂的變數

.dh-header:before {
	content:attr(data-title);
	display:block;
}