hover按钮宽度表现不符合预期，修改样式表未生效问题求助

问题根源 #

你写的.main__btn按钮没有设置position: relative，其内部的::after伪元素是绝对定位，默认会向上寻找最近的设置过定位属性的父级元素作为尺寸参照，因此hover时::after的width: 100%会参照视口宽度渲染，导致视觉上按钮大幅变宽。

修复方案 #

仅需要给.main__btn添加相对定位属性即可，完全保留原有渐变填充的hover效果，不需要修改其他逻辑：

.main__btn {
    font-size: 1rem;
    background-image: linear-gradient(to top, #008cff 0%, #0e0bec 100%);
    padding: 14px 32px;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    transition: all 0.35s;
    outline: none;
    /* 新增下面这行代码即可解决问题 */
    position: relative;
}

可选优化 #

如果担心按钮尺寸受内部文字长度影响出现布局跳动，可额外给.main__btn设置box-sizing: border-box属性，进一步稳定按钮尺寸。

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