因此，我试图让一个项目计数徽章显示覆盖在我的购物车图标在标题。我用这个SO answer作为灵感。我已经编辑了主题以包括data-count元素，并且我已经得到了我认为是正确的CSS，但是什么都没有显示-但是在JSFiddle中，它显示得很好。这个网站是https://wolfsrawfood.com/。滚动页面后，购物车图标会出现在一个粘滞的横幅中。我确信我只是在某个地方得到了一些风格，但我不知道它是什么。任何帮助或指示都是很棒的。JSFiddle
data-count
lawou6xi1#
您想在<svg>元素上使用伪元素（即::after）。这是不可能的，因此在StackOverflow上询问了manytimes。要看到这种情况，只需将CSS从<i>移动到<svg>。
<svg>
::after
<i>
<i>上的伪元素::after--〉工作∨
第一个
<svg>上的伪元素::after--〉不工作
第一次
制作一个 Package 器并在上面使用::after。你需要调整你的代码以使content: attr(data-count);能够工作（在下面的例子中我硬编码了content: '1';）。另外，你可能需要调整CSS，但是我解决了你所问的问题。第一个
content: attr(data-count);
content: '1';
1条答案
按热度按时间lawou6xi1#
问题是
您想在
<svg>元素上使用伪元素（即::after）。这是不可能的，因此在StackOverflow上询问了manytimes。要看到这种情况，只需将CSS从
<i>移动到<svg>。<i>上的伪元素::after--〉工作∨第一个
<svg>上的伪元素::after--〉不工作第一次
解决方案
制作一个 Package 器并在上面使用
::after。你需要调整你的代码以使content: attr(data-count);能够工作（在下面的例子中我硬编码了content: '1';）。另外，你可能需要调整CSS，但是我解决了你所问的问题。第一个