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

Question

我目前正在使用 CSS 将简短的字母数字代码打印到图标中，仅使用类名。

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

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

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

我现在需要添加数百个代码，而且我必须找到一种更好的动态执行此操作的方法。

有没有办法匹配CSS类的后缀，动态插入到content属性中？

除了类名，我无权访问任何其他 HTML 属性。

Answer 1

如果你做一些不同的事情，这是可能的。

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

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

然后在您的 CSS 中，使用 attr() 检索 content属性。

.icon:before
{
    content: attr(content);
}

JSFiddle

---

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

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

然后只需使用您用于 :before 的任何 CSS定位新 child <div>在同一个地方:

.icon .content
{
    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: -6px;
    margin-left: -10px;

    z-index: 1;
    //etc.
}