::before 和 ::after 是伪元素，它们用于在指定元素的内容前（::before）或内容后（::after）插入一些样式内容或者文本，可以用来扩展指定元素的样式。

使用 ::before 和 ::after 可以为指定元素添加图标、装饰、文本等内容，而不需要在HTML中添加额外的标记，从而提高HTML结构的可读性。这些伪元素在各种设计应用中都非常常见，例如为按钮添加箭头、添加图标/符号等等。

示例代码：

.example::before {
  content: "Hello, ";
  font-weight: bold;
}

.example::after {
  content: " World!";
  font-weight: bold;
}

使用这个CSS代码，可以在 .example 元素的前面添加 "Hello, "，同时在元素的结尾处添加 "World"。