利用css伪元素制作关闭符号

.closeX{
    cursor: pointer;
    position: absolute;
    right: 4px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 20px;
    height:5px;
    background-color: #55acee;
    transform: rotate(45deg);
}
.closeX:hover{
    background-color: #99e0fe;
}
.closeX::after{
    /*这里的伪元素用after和before都一样*/
    cursor: pointer;
    content:'';
    display:block;
    width: 20px;
    height:5px;
    background-color: #55acee;
    transform: rotate(90deg);
}
  /*伪元素的hover*/
.closeX:hover::after{
    background-color: #99e0fe;
}