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 :

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

  border-bottom: 3px solid #57CBCC; 
  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