Tạo icon close bằng css

.closed-icon {
cursor: pointer;
display: inline-block;
vertical-align: middle;
width: 2em;
transition: all .2s ease-in-out;
}
.closed-icon:after, 
.closed-icon:before, 
.closed-icon span  
{
display: block;
transition: all .2s ease-in-out;
content: '';
margin: 10px 0;
height: 5px;
border-radius: 3px;
background-color: #f0f;
}
.closed-icon:hover:before {
  transform: translateY(15px) rotate(135deg);
}
.closed-icon:hover:after{
  transform: translateY(-15px) rotate(-135deg);
}
.closed-icon:hover span {
transform:scale(0);
}

Cần quan tâm: 
margin: 10px 0; height: 5px;
và
 translateY(15px)
để khi hover dấu X sẽ ở chính giữa.

Chúng ta cũng có thể tùy chỉnh đề biến thành dấu mũi tên khi hover... bằng cách thêm translateX, hay width, height cho phù hợp với icon.