CSS中的伪元素简介

CSS中的伪元素是指使用:before和 :after这两个CSS伪元素属性所创建的元素。这些元素不需要在HTML结构中就可以被CSS样式所调用，因此成为了CSS样式设计中的重要元素。

:before 伪元素的使用

:before伪元素的正式名称是“假像素”，其可以让开发者在目标元素之前插入文本和内容，使得目标元素的呈现看起来更加清晰美观。

.content:before {
  content: 'Before element';
  font-size: 16px;
  font-weight: bold;
  color: #009688;
}

上述代码使用:before伪元素在目标元素显示之前插入了文本“Before element”，并且设置了该文本的字体大小、加粗和颜色等CSS属性，这样就能实现一个相对于原有元素位置上的“追加文字效果”。

:after 伪元素的使用

同样的，:after伪元素的正式名称是“假像素”，和:before一样，:after也可以在目标元素之后插入文本和内容，但是最主要的功能是用于实现清理浮动。 因为前面演示:before时我们已经演示了文本插入的功能，下面是演示使用:after清除浮动：

<div class="container">
  <div class="left">Left Content</div>
  <div class="right">Right Content</div>
  <div class="clearfix"></div>
</div>

.left {
  width: 50%;
  float: left;
  background-color: #ddd;
}
.right {
  width: 50%;
  float: right;
  background-color: #eee;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

在这个例子中，我们有两个浮动元素.left和.right，他们都设置了浮动属性，但是块级父元素div.container的高度没有自适应地调整（也就是失去了清晰地“缩放”），在这个时候我们可以使用清除浮动。伪元素:after帮助我们在目标元素最后插入了一个空白元素，然后给该元素添加了CSS的display:block（块级元素）和clear:both（清除浮动）属性，以完成清除浮动的效果。

这里介绍的只是:before和:after伪元素的基本应用，实际上还有很多种:before和:after伪元素组合应用，比如创建三角形、实现“loading”等，需要开发者自行探索和设计。