html - 为什么我的代码获得屏幕宽度而不是父屏幕宽度？

所以，举个例子。。当我将鼠标悬停在按钮上时，我希望有一条线从按钮的中间到边缘缩放。但是它得到了屏幕的宽度并将其缩放到这个值。这里有一个关于JSFiddle的例子，希望对您有所帮助！
https://jsfiddle.net/RVKuzmik/kabnL1yw/

<html lang="en">
<head>
</head>
    <body>
        <h1 id="connectbtn">
            test
        </h1>
    </body>
</html>


#connectbtn {
    text-align: center;
    color: red;
}

#connectbtn:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1%;
    background-color: tomato;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.15s ease-in-out 0s;
}

#connectbtn:hover:before {
    visibility: visible;
    transform: scaleX(1);
}

最佳答案

给予#connectbtn:beforealeft: 0; position

#connectbtn:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1%;
    background-color: tomato;
    visibility: hidden;
    transform: scaleX(0);
    left: 0;
    transition: all 0.15s ease-in-out 0s;
}

connectBtn

html - 为什么我的代码获得屏幕宽度而不是父屏幕宽度？