1. CSS中before的作用
CSS中的::before伪元素可用于向某个元素的内容之前插入内容。它们常用于添加一些修饰性的内容，例如图标、计数器等。
使用::before伪元素，可以将额外的内容添加到每个匹配元素的内容之前。这单单是因为使用::before创建成为了一个元素本身，而不是它的内容。可以使用CSS样式定义添加的内容。
下面是一个基本的::before样例，它为一个元素添加了一个红色圆点：
p::before {
content: "?";
color: red;
}
在上面这个样式中，我们使用CSS伪元素来为所有的元素添加一个红色圆点，使用了::before伪元素。通过设置content: "?";，我们定义了要添加的内容为一个圆点。通过设置color: red;，我们定义了这个圆点的颜色为红色。
2. 使用 before 为元素添加图标
使用::before伪元素，可以为元素添加图标。通常，这些图标表示一些状态，例如警告、错误、成功等。在下面的例子中，我们将使用一个“警告”图标来演示如何使用::before伪元素：
.warning::before {
content: "??";
color: yellow;
font-size: 20px;
margin-right: 5px;
}
在上面这个样式中，我们使用CSS伪元素为所有带有warning类的元素添加一个警告符号，使用了::before伪元素。通过设置content: "??";，我们定义了要添加的内容为一个警告符号。通过设置color: yellow;，我们定义了这个警告符号的颜色为黄色。通过设置font-size: 20px;，我们定义了这个警告符号的大小为20像素。通过设置margin-right: 5px;，我们定义了这个警告符号与当前元素内容之间的右侧外边距为5像素。
3. 使用 before 为元素添加计数器
使用::before伪元素，可以为元素添加计数器。计数器是一种自动化的方式，用于跟踪标签中特定元素的数量。在下面的例子中，我们将使用一个计数器来统计匹配元素的数量：
.counter::before {
content: counter(item) ". ";
color: gray;
}
在上面这个样式中，我们使用CSS伪元素为所有带有counter类的元素添加一个计数器，使用了::before伪元素。通过设置content: counter(item) ". ";，我们定义了要添加的内容为计数器，它会显示“item”的数量，以及一个点作为分隔符。由于这个样式声明是在body元素内，所以需要在body元素内设置计数器。body {
counter-reset: item;
}通过设置color: gray;，我们定义了计数器的颜色为灰色。
4. 使用 before 为元素添加外轮廓
使用::before伪元素，可以为元素添加外轮廓。在下面的例子中，我们将添加一个黑色的“阴影”轮廓线，来演示如何使用::before伪元素：
.outline::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
border: 3px solid black;
z-index: -1;
}
在上面这个样式中，我们使用CSS伪元素为所有带有outline类的元素添加一个外轮廓线，使用了::before伪元素。通过设置content: "";，我们定义了要添加的内容为空。通过设置position: absolute;，我们使得这个伪元素的定位方式为绝对定位。通过设置top: -5px; left: -5px; bottom: -5px; right: -5px;，我们定义了这个伪元素的边框与匹配元素之间的间距为5像素。通过设置border: 3px solid black;，我们定义了这个伪元素的边框颜色为黑色，厚度为3像素。通过设置z-index: -1;，我们使得这个伪元素位于级别较低的堆栈上，因此不会干扰其他元素。
5. 总结
通过这篇文章，我们了解到了如何使用::before伪元素为元素添加图标、计数器、外轮廓等。::before伪元素在设计中起着重要作用，它允许开发者添加一些修饰性的内容，这样就可以为网页或应用程序添加一些增强的视觉效果。使用::before伪元素时，需要注意一些细节，例如伪元素的定位、内容填充、颜色、边框等。这些细节可以让伪元素发挥最佳效果，使网页或应用程序看起来更加专业。
总之，在CSS中，::before伪元素都扮演着重要的角色，应该充分利用它来创造更加丰富的用户体验。