在“探秘盒子浮动，破解高度塌陷与文字环绕难题，清除浮动成关键！”中，我们讲到如果父盒由于各种原因未设置高度， 子盒的浮动会导致父盒的高度塌陷。为了解决高度塌陷的问题，我们可以添加伪元素。
一、伪元素（创造虚拟元素）
1、概念
伪元素可以创建一些不在文档树中的元素，并为其添加样式。其中，::before 和::after 伪元素是最为常用的。
2、属性
::before 伪元素可以在元素内容的前面插入额外的内容。比如，我们可以为一个标题添加一个装饰性的图标，通过::before 伪元素来实现。
::after 伪元素则在元素内容的后面插入内容。例如，为一个段落添加下划线效果，或者在列表项后面添加一个特殊的符号。
代码如下：
运行结果如下：
这与之前的 “
”相似，都可以解决网页因为浮层而产生高度塌陷的问题，添加伪元素可以不破坏网页代码的骨架，所以比较推荐大家使用。二、伪类元素
1、伪类选择器的运用
主要运用于导航栏或者超链接的样式设计
在默认的浏览器方式下,超链接统一为蓝色并且带有下画线。访问过的超链接则为紫色并且也有下画线。
这种最基本的超链接样式已经无法滿足设计人员的要求。通过 css可以设置超链接的各种属性,而且通过伪类还可以制作出许多动态效果。
2、属性
link:访问前的样式；active：点击时的样式； visited ：访问后的样式；hover：鼠标悬停在上面的样式
需要说明的是，这 4 种状态的顺序不能颠倒。否则可能会导致伪类样式不能实现。这4种状态并不是每次都要用到,一般情况下只需要定义链按标签的样式以及：hover 伪类样式即可。
运行代码如下：
运行结果如下：
点击链接前的效果
鼠标悬停在链接上的效果
点击链接后的效果
！