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

CSS tạo Line Effect khi hover

Để tạo hiệu ứng line effect khi hover này, các bạn chỉ cần coppy toàn bộ đoạn CSS bên dưới của mình, và dán vào khung CSS Tùy Chỉnh trong Tùy Biến của Theme là được.

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