html - 如何将数据属性添加到 <figure> 元素，然后从 CSS 访问它？

<分区>

是否可以将一些数据属性添加到 <figure>元素然后从 CSS 访问它们？

比如我试过

figure { margin: 0 attr(data-margin %); }

与

<figure data-margin="15">...</figure>

但它不起作用。

还有不用JS的方法吗？

编辑:我不认为我的问题是重复的。事实上，我正在寻找一种替代方法来执行此操作。

我的目标是用属性装饰页面中的某些元素，最终用户可以通过编写一些 CSS 代码访问和使用这些属性。如果那不可能，我就让他们写 JS 代码，但我认为那样不太安全。

(最终用户是 ML 研究人员。我相信他们可以处理一些 CSS 或 JS 代码。)

最佳答案

你可以做到:

.test {
    display: inline-block;
    background-color: gray;
    width: attr(data-width px);
}

.test:after {
    content: attr(data-name);
}

<div class='test' data-name=" - CONTENT" data-width="200">teste</div>

关于html - 如何将数据属性添加到 <figure> 元素，然后从 CSS 访问它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47656999/

相关文章：

html - Flexbox 内容在表格中有一个像素偏移