仅使用css在元素范围之后添加内容

Question

我关注了html＆amp; css结构，

<style>
.widget-tag a:after{content: '/'}
</style>
<div class="widget-tag">
  <a href="abc.com">abc</a>
  <a href="xyz.xom">xyz</a>
</div>

输出：

<div class="widget-tag">
  <a href="abc.com">abc ::after</a>
  <a href="xyz.xom">xyz ::after</a>
</div>

我希望输出如下，因为那时'|'这将超出a范围。

<div class="widget-tag">
  <a href="abc.com">abc</a>::after
  <a href="xyz.xom">xyz</a>::after
</div>

当我正在使用第三方小部件时，我遵循限制， 我只能修改css - 而不能修改HTML。

那么，输出是否可以通过 css 来实现？

编辑：使用/更改了内容，stackoverflow中的用户与border-right属性混淆。另外，我不是在寻找js解决方案，因为我知道它。

Answer 1

在封闭::after的范围内使用<a>：

＆＃13;

＆＃13;

.widget-tag span::after { content: '/'; }

＆＃13;

<div class="widget-tag">
  <span><a href="abc.com">abc</a></span>
  <span><a href="xyz.xom">xyz</a></span>
</div>

＆＃13;

＆＃13;

＆＃13;

如果不更改HTML，则无法执行此操作。