css伪元素实现箭头和关闭图标

关闭按钮效果的实现

.close{
    display: inline-block;
    width: 14px;
    height: 1px;
    background: #ccc;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.close:after {
    content: ‘‘;
    display: block;
    width: 14px;
    height: 1px;
    background: #ccc;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

箭头的实现

arrow:after {
    content: ‘‘;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 1px solid #656565;
    border-right: 1px solid #656565;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-130deg);
}

原文地址：https://www.cnblogs.com/muqiao/p/8808189.html