Css 如何通过类名匹配设置动态内容属性？

我目前正在使用CSS将简短的字母数字代码打印成一个图标，只使用一个类名

我在自动生成的CSS文件中有100多行，如下所示：

.icon-aa:before{ content:"AA"; }
.icon-ab:before{ content:"AB"; }
 /* .. and so on .. */

<div class="icon">
    <div class="content">AA</div>
</div>
<div class="icon">
    <div class="content">AB</div>
</div>

div#container p:before{ content:attr(class); }

它笨重，但易于管理。。直到现在

我现在需要再添加数百个代码，我必须找到一种更好的方法动态地完成这项工作

有没有办法匹配CSS类的后缀并将其动态插入content属性

---

除了类名之外，我没有访问任何其他HTML属性的权限。

如果您做得稍有不同，这是可能的

创建1个类，然后将2个字母的内容添加到另一个属性，而不是将2个字母的内容附加到类名的末尾，如下所示：

<div class="icon" content="AA"></div>
<div class="icon" content="AB"></div>

---

如果您不能添加任何其他属性，我建议您使用子元素，如下所示：

.icon-aa:before{ content:"AA"; }
.icon-ab:before{ content:"AB"; }
 /* .. and so on .. */

<div class="icon">
    <div class="content">AA</div>
</div>
<div class="icon">
    <div class="content">AB</div>
</div>

div#container p:before{ content:attr(class); }

---

首先，您可以使用

attr

作为内容函数，但是如果您没有访问任何其他HTML属性的权限，则必须更改主CSS选择器。大概是这样的：

.icon-aa:before{ content:"AA"; }
.icon-ab:before{ content:"AB"; }
 /* .. and so on .. */

<div class="icon">
    <div class="content">AA</div>
</div>
<div class="icon">
    <div class="content">AB</div>
</div>

div#container p:before{ content:attr(class); }

---

不使用原始CSS。不过，像SASS或更少的预处理器可能会对您有所帮助。我对SASS解决方案持开放态度，尽管我仍然希望避免使用我认为SASS将生成的数千行CSS。除了类名之外，我没有访问任何其他HTML属性的权限。这使得它有点困难。我建议您仍然使用一个类，并使用一个子元素（如div或span），其样式与您的

：在
伪元素的样式之前类似。我也不能像这样访问HTML。但是，我可以使用JavaScript匹配类名并设置内容属性，就像第一个示例中一样。我假设这将打印“icon aa”而不是“aa”，对吗？它将打印“icon aa”；正确的。