CSS 中，::before 选择器用于在被选元素的内容前面插入内容。这意味着，在元素内的内容前，可以添加自定义的文本或生成的内容。例如，如果在段落元素内使用 ::before 选择器，可以在段落开始前添加一个图标或引号。这在需要在元素内容前添加装饰性内容或补充信息时非常有用。
同样地，::after 选择器则是在被选元素的内容后面插入内容。这个选择器通常用于在元素末尾添加额外的信息，比如在链接后添加一个小图标，或者在列表项后添加一个项目符号。使用 ::after 选择器，可以为页面添加额外的视觉效果，同时保持代码的整洁。
要使用 ::before 和 ::after 选择器，需要在 CSS 中指定它们应该插入的内容。这通常通过 content 属性实现。例如，可以设置 content: "示例内容"; 为 ::before 选择器指定要插入的内容。此外，还可以使用变量或表达式来动态地指定插入的内容。
这两个伪元素（::before 和 ::after）为开发者提供了在 HTML 结构中添加内容的灵活性，而无需修改实际的 HTML。这对于创建动态和响应式的网页设计非常有用。使用 ::before 和 ::after 选择器，可以轻松地为页面添加图标、引号、分隔线等元素，从而提高用户体验和页面视觉效果。
