css结合伪元素before，after制作网页返回顶部的图标

效果： html中： <a id="top" style="opacity: 1; display: block;"><span id="pre" class="pre"></span></a> c

效果：

html中：

<a id="top" style="opacity: 1; display: block;">	<span id="pre" class="pre"></span></a>

css样式：

​#top {    position: fixed;    display: block;    right: 20%;    bottom: 0px;    cursor: pointer;    width: 55px;    height: 55px;    background-color: #C1C1C1;    border-radius: 5px;    z-index: 100;}#pre {    position: relative;    top: 30px;    left: 15px;}#pre:before {    border-bottom-color: #FFFFFF;    top: -21px;}#pre:after, #pre:before {    border: 10px solid transparent;    border-bottom: 10px solid #C1C1C1;    width: 0;    height: 0;    position: absolute;    content: ' ';    top: -18px;}​

1. 首先id=pre的元素设置为相对定位，则两个伪元素设置为绝对定位后，使它们的top等属性就相对pre元素起作用。
2. 给伪元素设置边框，除了底边其他的边框都为透明，这样可以得到向上的三角形。
3. 通过设置before，after的top不同，让它们上下有个错位的效果，然后将before的底边框颜色设为白色，after的底边框设为a标签的背景色，相当于after元素遮盖了before的部分底边框，我们看到的就是before和after的top相差的像素，然后效果就出来了。