我可以在伪元素之前的内容 url 中插入 css 计数器吗答案

【问题标题】：Can i insert css counter in content url of pseudo before element我可以在伪元素之前的内容 url 中插入 css 计数器吗
【发布时间】：2021-09-10 10:28:59
【问题描述】：

我想像这样使用但不工作。

counter-increment: card;
h2{
    font-weight: normal;
    margin: 0;
    &::before{
        content: url(`../../public/icons/skill${counter(card)}.svg`);
    }
}

【问题讨论】：

标签： css sass pseudo-element

【解决方案1】：

简短回答，否。您还不能将attr() 或counter() 等其他函数传递给url() 函数以动态生成url 字符串。

但是由于您使用的是 sass，您可以使用@for 来实现它。尽管您必须选择一个数字（例如 50），但您确定同一层次结构中的 h2s 数量不会超过该数量。

h2 {
    font-weight: normal;
    margin: 0;

    @for $i from 1 through 50 {
        &:nth-of-type(#{$i})::before {
            content: url('../../public/icons/skill#{$i}.svg');
        }
    }
}

基本上它会为您生成以下 css：

h2 {
  font-weight: normal;
  margin: 0;
}
h2:nth-of-type(1)::before {
  content: url("../../public/icons/skill1.svg");
}
h2:nth-of-type(2)::before {
  content: url("../../public/icons/skill2.svg");
}
h2:nth-of-type(3)::before {
  content: url("../../public/icons/skill3.svg");
}
/* repeats 50 times */

【讨论】：