1. CSS :before属性介绍
CSS的伪元素:before属性可以让我们在一个元素前面插入一个内容。这个内容是由:before生成的，但这个新生成的内容不是通过HTML输入进来的，通过这个:before属性可以为元素添加一些“图像”的效果，如果使用好，针对一些简单的图像效果，我们就可以使用伪元素:before添加“图像”，这样就可以避免使用图片或者其他的标记。
在许多情况下，为了实现一些特定的样式效果，需要在元素的某个位置插入一些特殊的内容。实现这种效果最直观的想法就是插入一个标签，像这样：
.list-item::before{
content:"";
display:inline-block;
height:15px;
width:15px;
background-color:red;
margin-right:10px;
}
在这段代码中，我们新定义了:before属性，并为它设置了一些属性值。虽然我们在HTML结构当中没有为这个类添加前缀，但是通过:before伪类，我们可以给这个元素添加一个类似“图像”的特性。
1.1 使用:before实现三角形
假设在一个按钮元素中需要实现一个三角形的箭头，我们可以使用:before生成一个三角形，代码如下：
.arrow-icon::before {
content:"";
position:absolute;
top:-10px;
left:50%;
margin-left:-5px;
border-style: solid;
border-width: 0 5px 10px 5px;
border-color: transparent transparent red transparent;
}
使用这个CSS样式，就可以在一个class为“arrow-icon”的元素前面插入一个表示三角形的标记，从而实现三角形箭头的效果。
1.2 使用:before实现内联元素
在页面当中，我们常常需要为特殊的元素指定一些公共的行为。例如，在文本块中某个元素需要作为关键字进行显示，我们在HTML中可以通过<em>标签来实现这一点。但是如果只是为了简单的改变字体的样式，我们就没必要在HTML结构中添加自定义标签。我们可以使用:before来为页面中的任意一个元素生成内联元素。代码如下：
.keyword::before {
content: "【";
color: #999;
}
.keyword::after{
content:"】";
color:#999;
}
通过这种方式，我们就可以在任意元素之前模拟生成一些虚拟的内容，这会让我们的设计更加灵活。
2. CSS :before属性使用示例
上面介绍了CSS :before属性的基本用法，下面通过实际示例来展示一下 :before属性的使用场景。
2.x 示例1：设置字体图标样式
使用:before属性也可以方便地设置字体图标的样式，从而实现一些简单的图像效果。下面是一个添加字体图标样式的示例：
.icon::before {
content:"\f002";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
margin-right:5px;
}
在这个示例当中，我们使用了 :before 伪属性，在元素的前面添加了一个特殊效果（这里是一个字体图标），图标使用了FontAwesome字体库，由于我们在 content 属性中使用了\f002，这会让 :before 生成的内容为一个碗形的字体图像。
2.x 示例2：自动生成列表符号
通过修改列表用的样式，我们可以使用:before伪类来自动生成列表符号。下面的代码可以在无序列表中自动生成圆形符号：
li:before {
content:"\25cf";
color:#aaa;
margin-right:10px;
}
我们使用 \25cf 作为 content 属性值，这个值代表的是圆形符号的 Unicode 编码值，这样就可以生成一个表示圆形符号的小圆点了。
2.x 示例3：生成登陆框圆形头像
如果我们在登录界面下方要显示用户的头像，我们可以通过 CSS :before 属性为其生成圆形头像。但是此时我们需要为 div元素或 a元素添加 background 属性，从而为它们添加相应的背景图像。以下是关键代码：
.user-avatar{
background:url("user.jpg") no-repeat center center;
background-size:cover;
width:80px;
height:80px;
border-radius:50%;
overflow:hidden;
position:relative;
}
.user-avatar:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
}
在上面的代码中，我们首先为 .user-avatar 元素添加了一张包含头像的背景图像，下面我们使用 :before 伪属性为这个元素添加一个半透明的遮罩层，最后，这个元素就变成了一个圆形的形状。
3. CSS :before 与 :after 的区别
对于 :before 和 :after 伪类，很多人会感到混淆，因为这两个关键字看上去非常相似。
在本质上，这两个关键字都代表了一个伪元素，它们可以让我们在样式表中为一个元素添加额外的内容。它们之间的主要区别在于：:before 生成的内容在元素的前面，而 :after 生成的内容在元素的后面。以下是具体的代码：
/* :before在元素的前面添加内容 */
.element:before {
content: "▲ ";
}
/* :after在元素的后面添加内容 */
.element:after {
content: " ▼";
}
在这个示例中，我们在一个 .element 元素的前面和后面分别添加了两个 content 值相等的 :before 和 :after 伪元素。因为 :before 在元素前面添加生成的内容而 :after 是在元素的后面添加，所以最终的生成的内容是这样的：
<div class="element">▲ Element ▼</div>因为 :before 和 :after 的应用原理十分相似，所以我们可以将这两个伪元素的应用当作一个整体来看。这里，我们列出了一些 :before 和 :after 可以发挥作用的实际应用场景：
- 针对列表元素添加符号
- 针对友情链接内容添加超链接礼物进行美化
- 针对元素添加分隔符样式
- 针对Input添加下载样式
- 针对 en-us 语言界面使用 :before 为一个元素添加公共的内容
- 针对其余的一些类似场景来增强额外的视觉效果
4. 总结
CSS伪元素:before属性的使用十分灵活，因为在某些场景下，我们可以替代其他标记来生成一些“图像”的效果，而在其他场景下，我们则可以利用:before来增强某些元素的视觉效果。
知道了:before 的功能，我们就不必再花费过多的时间去添加和修改HTML结构，这样我们就可以在保持HTML结构纯净、语义化的前提下，让Web页面拥有更多的视觉效果。而通过这些技巧，我们就可以让 Web 开发的工作变得更加高效、可维护以及精确。