嵌套 ::before 元素背后的目的是什么

Question

所以我检查了一些代码并注意到在 [页面刷新] 图标 (<i>) 中标记了一个名为 ::before 的元素。那个伪元素实际上是嵌套在里面还是解释错了？这是如何运作的？它会生成一个图标 "before" 页面刷新吗？好奇的。

标记： https://i.gyazo.com/37bc95e0bb2fc7848cb96ecc6d2ad089.png

Answer 1

p::before {
    content: "Before-";
}

p::after {
    content: "- After";
}

<p> It's simple </p>

这就是 ::before 和 ::after 的工作原理