上次讲了一些基本的 CSS 形状，实际的网页当中当然不只是这些普通的三角形，还有很多复杂一点的图形，比如搜索框中的放大镜等等，这时为了不添加额外元素就要用到伪元素 ::before 和 ::after。
什么是伪元素##
简而言之，伪元素会在内容元素的前后插入额外的元素，但这些元素实际上并不在文档中生成，它们在外部可见但是你将不会在源代码中找到它们，因此，实际上它们是“虚假”的元素。
使用伪元素绘制图标##
让我们先来绘制一个放大镜的图标，最后的结果如下图所示：
先绘制一个圆圈，很简单：
#magnifier {
position: relative;
width: 50px;
height: 50px;
border: 5px solid red;
border-radius: 999em;
}
那放大镜的手柄怎么办呢，在不添加元素的情况下用伪元素就很容易做到：
#magnifier::before {
content: "";
position: absolute;
left: 45px;
top: 45px;
width: 40px;
height: 10px;
background-color: red;
-webkit-transform-origin: 5px 5px;
transform-origin: 5px 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
再来绘制一个复杂一点的，图片图标：
先绘制一个外框：
#image {
position: relative;
width: 100px;
height: 80px;
border: 5px solid red;
overflow: hidden;
}
再用 ::before 伪元素绘制太阳：
#image::before {
content: "";
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
border-radius: 999em;
background-color: red;
}
那剩下的两座山怎么办呢，只剩下一个 ::after 伪元素了，可以用 box-shadow 加旋转来解决：
#image::after {
content: "";
position: absolute;
left: 0px;
top: 50px;
width: 60px;
height: 60px;
background-color: red;
box-shadow: 45px 25px 0px 0px red;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
这次就先说到这里，下次再讨论更更更复杂的图形。
