Problem with my animated border in HTML/CSS

Question

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 ?