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;
}