Reducing the width of div from both left and right at the same time

Question

how to reduce the width of div from both left and right at the same time when i mouse over the div?

something like this -> example

i don't know why the bottom div is just reduced from left.

    #border-top-category {
        position: absolute;
        border-top: solid 20px rgb(234, 198, 255);
        width: 100px;
        top: 0px;
        right: 10px;
        transition: width 2s;
        }
#border-top-category:hover {
       width: 50px;
       }

          <div id="border-top-category"></div>

Answer 1

Instead of animating the width, you could change the scale of the element on hover.
Set the default scaleX to 1 and change it on hover to 0.

Your CSS code could then look like this:

    #border-top-category {
        position: absolute;
        border-top: solid 20px rgb(234, 198, 255);
        width: 100px;
        transform: scaleX(1);
        transform-origin: center;
        top: 0px;
        right: 10px;
        transition: transform 2s;
    }

    #border-top-category:hover {
        transform: scaleX(0);
    }

<div id="border-top-category"></div>

Answer 2

#border-top-category {
    position: absolute;
    border-top: solid 20px rgb(234, 198, 255);
    width: 100px;
    top: 0px;
    right: 10px;
    transition: transform 2s;
    }
    #border-top-category:hover {
   transform: scaleX(0.5);
   }

Use transition to transform the X axis (scaleX(k) it will make the x axis to k time)