Hướng dẫn tạo hiệu ứng line effect khi rê chuột vào bài viết

/*line effect animation by mywebsite.com.vn*/
.post-item .col-inner::before, .post-item .col-inner::after{
content:"";
width: 0;
height: 2px;
z-index:1;
position: absolute;
transition: all 0.2s linear;
background: #f8be00;
box-shadow:
transition:400ms ease all;
transition-delay: 0.3s;
}
.post-item .col-inner .box::before, .post-item .col-inner .box::after{
content:"";
width:2px;
height:0;
z-index:1;
position: absolute;
transition: all 0.2s linear;
background: #f8be00;
transition:400ms ease all;
transition-delay: 0s;
}
.post-item .col-inner:hover::before, .post-item .col-inner:hover::after{
width: 100% ;
}
.post-item .col-inner:hover .box::before, .post-item .col-inner:hover .box::after{
height: 100%;
}
.post-item .col-inner::before{
right: 0;
top: 0;
}
.post-item .col-inner::after{
left: 0;
bottom: 0;
}
.post-item .col-inner .box::before{
left: 0;
top: 0;
}
.post-item .col-inner .box::after{
right: 0;
bottom: 0;
}
.post-item .col-inner:hover::before, .post-item .col-inner:hover::after{
transition-delay: 0s;
}
.post-item .col-inner:hover .box::before, .post-item .col-inner:hover .box::after{
transition-delay: 0.3s;
}