Problem with my animated border in HTML/CSS


I want to put a animated bottom border on a rectangle.

I’ve put a border-bottom and despite that, the border is on the top : https://codepen.io/lucbenedet/pen/KKmoGqZ

<div class="rectangle"></div>
.rectangle {
  height: 50px;
  width: 100px;
  background-color: #555;
}

.rectangle:after{
  border-bottom: 3px solid #57CBCC; 
  display:block;
  content: ''; 
  transform: scaleX(0);  
  transition: transform 400ms ease-in-out;
}
.rectangle:hover:after { 
  transform: scaleX(1); 
}

Someone to explain to me why ?



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here