事后边界放射性问题

Question

我的悬停效果有问题。 我正在使用后效应从左到右为元素的宽度设置动画。 （0像素到100％） 使用边界半径不会填充整个元素。 有什么解决方案？

https://imgur.com/a/CZxy9Oq

.btn {
    &,
    &:link,
    &:visited {
        text-transform: uppercase;
        text-decoration: none;
        padding: 1.5rem 4rem;
        display: inline-block;
        border-radius: 10rem;
        transition: all .2s;
        position: relative;
        font-size: 2.6rem;
        font-weight: 800;
        color: $color-white;
        //Change for the <button> element
        border: none;
        cursor: pointer;
        z-index: 20;
        position: relative;
        overflow: hidden;

        @include respond(tab-port) { // width < 900?
            z-index: 10;
        }
    }

    &::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        border-radius: 9rem;
        transition: all .2s ease-in-out;
        z-index: -1;
    }

    &--blue {
        border: 2px solid $color-primary-blue;

        &::after{
            background: $color-primary-blue;
        }
    }