在浏览器中绘制或呈现css的：：before内容的过程是什么？

嗨，我在使用css制作六边形并在：：before中插入content属性时发现了一些有趣的事实

.hstackContainer{
背景色：#161b21；
.项目{
宽度：190px；
高度：195px；
背景色：#fff；
剪辑路径：多边形（0%25%、0%75%、50%100%、100%75%、100%25%、50%0%）；
}
.项目：：之前{
内容：“Sadasds”；
位置：绝对位置；
宽度：190px；
高度：195px；
背景色：rgb（255、255、255、0.5）；
}
}

“test”是一个p标记，“sadasds”是作为内容添加到：：before中的元素。我发现“test”变成了一个游标，“sadasds”不是

CSS生成的内容不包括在DOM中，也不进入可访问性树

通过上面的句子，您可以看到在：：before中指定为内容的字符串包含在CSSOM中。（也许…？）

{/*col div*/}
萨达斯达斯
{/*col div*/}
萨达斯达斯
萨达斯达斯
萨达斯达斯
萨达斯达斯
{/*col div*/}
萨达斯达斯
萨达斯达斯
萨达斯达斯
萨达斯达斯
{/*col div*/}
萨达斯达斯

我计划做一个实验

在实验中，'sadasds'是相同的条件，除了div标签和css的：：before的内容

[A] div标签中的“sadasds”。未使用内容属性。 [B] 使用：：before中的内容绘制“sadasds”

• [A]

• [乙]

实验在Nextjs中完成，共进行了3次。除[A]和[B]外，条件相同。可能存在环境问题，但我认为B的情况通常更快，因为它包含在CSSOM中并已绘制

在浏览器中绘制或呈现css的：：before内容的过程是什么

最后，我想我可以通过上面的问题得到下面的答案。 另外，你能告诉我你对以下问题的认识吗

哪个更快，[A]还是[B]？原因是什么？ （为什么会出现不稳定的结果？）