CSS
.the_list_item .the_list_item_action a::after {
content: " " !important;
}
.the_list_item_action a{
background: transparent !important;
border-radius:0px !important;
box-shadow: none !important;
border: none !important;
font-size: 1.7rem !important;
text-transform: uppercase !important;
color: #000 !important;
-webkit-transition: all .3s ease-in-out !important;
-moz-transition: all .3s ease-in-out !important;
-o-transition: all .3s ease-in-out !important;
transition: all .3s ease-in-out !important;
}
.the_list_item_action {
background-color: transparent !important;
display: inline-block;
position: relative;
background: none;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
margin: 20px 30px;
background: #fff;
}
.the_list_item_action a{
display: block;
padding: 25px 80px;
}
.the_list_item_action::before, .the_list_item_action::after{
content:"";
width: 0;
height: 2px;
position: absolute;
transition: all 0.2s linear;
background: #000;
}
.the_list_item_action::before, .the_list_item_action::after{
background: #000 !important;
}
.the_list_item_action a::before, .the_list_item_action a::after{
content:"";
width:2px;
height:0;
position: absolute;
transition: all 0.2s linear;
background: #000;
}
.the_list_item_action:hover::before, .the_list_item_action:hover::after{
width: 100%;
}
.the_list_item_action:hover a::before, .the_list_item_action:hover a::after{
height: 100%;
}
.the_list_item_action::after{
left: 0;
bottom: 0;
transition-delay: 0.6s;
}
.the_list_item_action a::after{
transition-delay: 0.4s;
right: 0;
bottom: 0
}
.the_list_item_action::before{
right: 0;
top: 0;
transition-delay: 0.2s;
}
.the_list_item_action a::before{
transition-delay: 0s;
left: 0;
top: 0;
}
.the_list_item_action:hover::after{
transition-delay: 0s;
}
.the_list_item_action:hover a::after{
transition-delay: 0.2s;
}
.the_list_item_action:hover::before{
transition-delay: 0.4s;
}
.the_list_item_action:hover a::before{
transition-delay: 0.6s;
}
