求助：如何让transition过渡效果在元素border radius内启动？

我给一个按钮设置了transition过渡效果，但该效果从我设定的border-radius（边框圆角）范围外开始触发，希望过渡效果能在边框内部启动。

我的实现代码如下：

CSS代码 #

#login-now {
    position: relative;
    font-size: 18px;
    color: white;
    background-color: #00a295;
    padding: 13px 94px;
    border-radius: 10px;
    line-height: 2.5;
}
#login-now-text {
    position: relative;
    z-index: 2;
}
#login-now:after{
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    content: "";
    border-radius: 10px;
    background-color: #007d73;
    transition: all .35s;
}
#login-now:hover:after{
    width: 100%;
}

HTML代码 #

<a id="login-now">
    <span id="login-now-text">Log in</span>
</a>

我尝试添加ease-in以及修改top属性值，但均未解决问题。

只需给父元素#login-now添加overflow: hidden属性，即可将过渡效果限制在圆角边框内部：

修改后的CSS代码：

#login-now {
    position: relative;
    font-size: 18px;
    color: white;
    background-color: #00a295;
    padding: 13px 94px;
    border-radius: 10px;
    line-height: 2.5;
    overflow: hidden; /* 添加该行代码 */
}
#login-now-text {
    position: relative;
    z-index: 2;
}
#login-now:after{
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    content: "";
    border-radius: 10px;
    background-color: #007d73;
    transition: all .35s;
}
#login-now:hover:after{
    width: 100%;
}

原理：overflow: hidden会裁剪父元素边框（包括圆角）外的所有内容，伪元素的过渡动画会被限制在父元素的圆角范围内执行，不会从外部触发。

内容的提问来源于stack exchange，提问作者catmau5