如何使用CSS在<a>之后插入<span class="notifier">3</span>？

Question

我想添加一个通知圆到我的可湿性粉剂网站上的一个菜单项。样式是在css中完成的，现在它必须放在一个不存在的<span>标记中。必须将<span>放在<a>标记之后，它才能工作。我的方法是使用::after，但我似乎无法让代码正常工作。我做错了什么？

我尝试了许多变体，但都没有成功。

这不起作用：

a::after { 
  content: "<span class="notifier">3</span>";
  }
.notifier {
    position: absolute;
    top: 1.25rem;
    right: -0.5rem;
    background: #ea3326;
    width: 1.25rem;
    height: 1.25rem;
    text-align: center;
    line-height: 1.225rem;
    color: #ffffff;
    font-weight: bold;
    border-radius: 100%;
    z-index: 97;
    font-size: 0.8rem;
    cursor: pointer;
}

以下内容也不起作用。但是，它在前端显示了代码<span class="notifier">3</span>，但没有显示样式。

a::after { 
  content: "<span class=\"notifier\">3</span>";
  }
.notifier {
    position: absolute;
    top: 1.25rem;
    right: -0.5rem;
    background: #ea3326;
    width: 1.25rem;
    height: 1.25rem;
    text-align: center;
    line-height: 1.225rem;
    color: #ffffff;
    font-weight: bold;
    border-radius: 100%;
    z-index: 97;
    font-size: 0.8rem;
    cursor: pointer;
}

我希望按钮旁边有一个红色的圆圈和一个白色的3。

Answer 1

You can't inject HTML via pseudo elements，但您不需要这样做。只需创建一条样式规则，根据需要插入内容和样式：

​

a::after {
  content: "3";
  display: inline-block;
  position: relative;
  top: -5px;
  right: -5px;
  background: #ea3326;
  width: 1.25rem;
  height: 1.25rem;
  text-align: center;
  line-height: 1.25rem;
  color: #ffffff;
  font-weight: bold;
  border-radius: 100%;
  z-index: 97;
  font-size: 0.8rem;
  cursor: pointer;
}

<a href="#">foo</a>

​