html - 同时从左右两边减小div的宽度

Question

当我将鼠标悬停在 div 上时，如何同时从左侧和右侧减小 div 的宽度？
像这样 -> example
我不知道为什么底部 div 只是从左边减少了。

    #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

您可以在悬停时更改元素的比例，而不是为宽度设置动画。
设置默认值 scaleX到 1 并在悬停时将其更改为 0。
您的 CSS 代码可能如下所示:

    #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>