一个纯CSS写的返回顶部按钮组

• HTML代码：

<div class="gotop">
    <ul>
        <li><a id="goTopBtn" href="#"><i class="icon iconfont">&#xe60b;</i><em>返回顶部</em></a></li>
        <li><a href="#"><i class="icon iconfont">&#xe605;</i><em>上一文章</em></a></li>
        <li><a href="#"><i class="icon iconfont">&#xe622;</i><em>下一文章</em></a></li>
        <li><a target="_blank" href="#"><i class="icon iconfont">&#xe600;</i><em>官方客服</em></a></li>
        <li><a href="#" class="user" target="_blank"><i class="icon iconfont">&#xe60e;</i><em>个人中心</em></a></li>
    </ul>
</div>

• CSS代码：

.gotop {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: 600px;
    margin-top: -125px;
}
.gotop li a {
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 1px solid #000;
    background-color: #333;
    color: #fff;
    line-height: 15px;
    padding: 10px;
    text-align: center;
}
.gotop li a.user {
    border: 0;
}
.gotop li a i {
    line-height: 30px;
    font-size: 20px;
}
.gotop li a em {
    display: none;
}
.gotop li a:hover {
    background-color: #3398cc;
    color: #fff;
}
.gotop li a:hover i {
    display: none;
}
.gotop li a:hover em {
    display: block;
    font-style: normal;
}