是否可以使用HTML的data-*属性在CSS中设置元素宽度？

问题原因 #

你当前写法不生效是因为CSS原生的attr()函数目前仅支持在content属性中使用，暂时不支持用于width这类常规CSS属性，该用法属于CSS Level 4的草案规范，主流浏览器均未适配。

最优解决方案：使用CSS自定义属性（变量）实现 #

这是目前兼容性最好、最符合需求的实现方式，不需要额外写JS，也不用给每个技能条单独定义类名：

1. 修改HTML代码，把宽度值存在内联的CSS变量里：

<span class="skill-bar html-skill" style="--skill-width: 80%"></span>

2. 调整CSS代码直接读取变量即可：

.skill-bar {
    width: var(--skill-width);
    /* 其余原有技能条样式（高度、背景、圆角等）保留即可 */
}

后续要修改宽度直接改HTML里--skill-width的取值就行，完全不需要同步修改CSS。

保留data-*属性的备选方案 #

如果你一定要用data-width属性存值，可以加少量JS实现：

// 页面加载后自动读取所有技能条的data-width赋值给宽度属性
document.querySelectorAll('.skill-bar').forEach(bar => {
  bar.style.width = bar.dataset.width;
})

HTML不需要改动，沿用你原来的写法即可。

内容的提问来源于stack exchange，提问作者sueszli