before和after的样式符号

刷新：

.widgets__icon_refresh{
    display:block;
    float:left;
    position:relative;
    width:16px;
    height:16px;
    padding:2px;
    border: 4px solid transparent;
    cursor:pointer;
}

.widgets__icon_refresh:before{
    position:absolute;
    content:"";
    display:block;
    width:calc(100% - 4px);
    height:calc(100% - 4px);
    border-radius:100%;
    border:2px solid #a7a7a7;
    border-top:2px solid transparent;
    -webkit-transform: rotate(45deg);
}
.widgets__icon_refresh:after{
    position:absolute;
    content:"";
    display:block;
    border: 7px solid transparent;
    border-left: 7px solid #a7a7a7;
    left:50%;
    top:-3.5px;
}

叉号：

.widgets__icon_close{
    display:block;
    float:right;
    position:relative;
    width:16px;
    height:16px;
    border: 4px solid transparent;
    cursor:pointer;
}

.widgets__icon_close:before{
    position:absolute;
    content:"";
    display:block;
    width:1px;
    height:21px;
    border-right:2px solid #a7a7a7;
    -webkit-transform: rotate(135deg);
}
.widgets__icon_close:after{
    position:absolute;
    content:"";
    display:block;
    width:1px;
    height:21px;
    border-right:2px solid #a7a7a7;
    -webkit-transform: rotate(45deg);
}

注意：135+45=180度