I have this div
with borders in the corners and I wanted the right border to be down and the left border up when the div is in hover
but I could not apply the effect.
Here's what I've tried:
div.classe {
position: relative;
float: left;
padding: 0 10px;
width: 80%;
height: 100px;
background: rgba(38, 166, 91, 0.5);
margin-top: 30px;
transition: all 0.4s ease-in-out;
}
div.classe:after {
content:"";
height: 70px;
width: 70px;
position: absolute;
bottom: 0;
left: 0;
border-left: 4px solid #000;
border-bottom: 4px solid #000;
z-index:-1;
margin-bottom:-4px;
margin-left: -4px;
border-color
}
div.classe:before {
content:"";
height: 70px;
width: 70px;
position: absolute;
top: 0;
right: 0;
border-right: 4px solid #000;
border-top: 4px solid #000;
z-index:-1;
margin-top:-4px;
margin-right: -4px;
}
div.classe:hover{
transform: translateY(-20px);
}
div.classe:hover:before{
content:"";
height: 70px;
width: 70px;
position: absolute;
right: 0;
top: 0;
border-right: 4px solid #000;
border-top: 4px solid #000;
z-index:-1;
margin-top:-4px;
margin-right: -4px;
border-color
}
div.classe:hover:after{
content:"";
height: 70px;
width: 70px;
position: absolute;
bottom: 0;
left: 0;
border-left: 4px solid #000;
border-bottom: 4px solid #000;
z-index:-1;
margin-bottom:-4px;
margin-left: -4px;
}
<div class="classe">
texto qualquer
</div>