html - CSS 技巧 : get property value into another css tag

Question

我试图仅使用 CSS 来调整内部站点(公司政策:它无法正常工作，因此不会接触服务器，实际上它将通过 CSS 扩展来完成)

并且我们需要将 HTML 中某个属性中存在的值包含到 View 中(由用户看到)

HTML 看起来像:

<div class="card card-employe" employid="a453">
    <a href=... target="_blank">
        ...
    </a>
</div>

所以我可以使用 CSS 选择器在卡片上插入文本:

.card-employe::before {
  content: "_ #EmployeID:";
}

但我梦想着像更高级的东西

.card-employe::before {
  content: "#EmployeID:" + this.employid;
}

所以文本将显示:

#EmployeID:a453

只用 CSS 有可能吗？？

Answer 1

是的，这是可能的，使用这个:

.card-employe::before {
  content: "#EmployeID:" attr(employid);
}

有关 attr 的更多信息，请访问 https://developer.mozilla.org/en-US/docs/Web/CSS/attr