::before 和 ::after 之间有什么区别

::before 和 ::after 是CSS中用于创建伪元素的伪类选择器。它们允许在元素的内容之前（::before）或之后（::after）插入内容。这些伪元素通常用于添加装饰性的内容，如图标、小图标、额外的文本等。尽管它们的用途相似，但它们之间还是存在一些差异：

1. 插入内容的位置：

   • ::before 用于在元素的实际内容之前插入新内容。
   • ::after 用于在元素的实际内容之后插入新内容。

2. 内容的生成：

   • 两者都可以使用 content 属性来生成内容，但 ::before 和 ::after 可以与不同的CSS属性结合使用，以实现不同的效果。

3. 与元素内容的关系：

   • ::before 插入的内容被视为元素的子元素，因此在文档流中，它位于元素内容的前面。
   • ::after 插入的内容也被视为元素的子元素，但在文档流中，它位于元素内容的后面。

4. 使用场景：

   • ::before 常用于创建前缀标签，例如在列表项前添加项目符号。
   • ::after 常用于添加尾注、页脚信息或清理浮动。

5. 浏览器兼容性：

   • 两者在现代浏览器中都有很好的支持，但是 ::after 和 ::before 在早期的CSS版本中是作为 :before 和 :after 实现的，所以在一些旧的浏览器或代码中可能会看到这样的写法。

6. 样式和定位：

   • 伪元素可以像普通元素一样被样式化，你可以为它们设置宽度、高度、边距、背景等样式。
   • 由于它们是伪元素，::before 和 ::after 不会影响HTML文档结构，它们仅存在于视觉层面。

举例来说，如果你想在段落的开头和结尾分别添加装饰性的图标，你可以这样写CSS：

p::before {
  content: url("path/to/icon-start.png");
}

p::after {
  content: url("path/to/icon-end.png");
}

在这个例子中，::before 会在每个段落的开始处插入一个图标，而 ::after 会在每个段落的末尾处插入另一个图标。通过这种方式，你可以轻松地在元素的前后添加视觉元素，而不需要改变HTML结构。