Flex容器下水平列表响应式分隔符不显示问题求助

我参考了Stack Overflow上的《Responsive Separator for Horizontal List》一文，尝试实现水平列表的响应式分隔符，但遇到了问题。

我通过以下JavaScript代码，按A键时动态插入列表内容到flex布局的#content容器中：

document.onkeydown = function(event) {
var actionBox = document.getElementById('content');
switch (event.keyCode) {
  case 65:
    event.cancelBubble = true;
    event.returnValue = false;
    actionBox.innerHTML = '<ul id="content" class="name-container"> <li>Prename <strong>Name</strong></li> <li>Prename <strong>Name</strong></li> <li>Prename <strong>Name</strong></li> <li>Prename<strong>Name</strong></li></ul>';

    break;

}

return event.returnValue;
  }

使用的CSS样式参考自该文章：

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline;
}
li::after {
  content: " ";
  word-spacing: 1em;
  background-image: linear-gradient(
    -0.25turn,
    transparent 0 calc(50% - 0.03em),
    currentcolor 0 calc(50% + 0.03em),
    transparent 0
  );
}

但实际效果是列表项之间没有显示分隔符，尽管浏览器调试工具中能看到::after元素已经存在。而使用预定义的静态列表时，相同的CSS却能正常显示分隔符：

静态列表使用的CSS：

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline;
}
li::after {
  content: " ";
  word-spacing: 1em;
  background-image: linear-gradient(
    -0.2turn,
    transparent 0 calc(50% - 0.03em),
    currentcolor 0 calc(50% + 0.03em),
    transparent 0
  );
}

静态列表的HTML结构：

<ul>
 <li>foo</li>
 <li>bar</li>
 <li>baz</li>
 <li>gazonk</li>
 <li>qux</li>
 <li>quux</li>
</ul>

问题似乎出在包裹列表的#content是flex容器上，请问这是为什么？我希望保留flex布局的同时解决该问题。

内容的提问来源于stack exchange，提问作者Marzii