css - Box-sizing:border-box が疑似要素で機能しない

Question

box-sizing:border-box を運のない疑似要素に適用しようとしています - パディング - 効果に必要 - 疑似要素の最大幅 (または幅) が 0 になるのを妨げています - 常に 0 + パディングです.

適用したい要素は<a>タグです

<a class="button">Learn More</a>    

そして、私のCSSは明示的に要素のborder-boxを呼び出します:

.button {
    font-family:helvetica;
    display: inline-block;
    border: 2px solid #231f20;
    font-weight:bold;
    text-align: center;
    font-size: 14px;
    padding:12px 40px;
    position: relative;
}

.button:before {
    box-sizing:border-box;
    content:"Learn More";
    background-color:#231f20;
    max-width:0%;
    position:absolute;
    height:100%;
    left:0;
    top:0;
    overflow:hidden;
    color:#fff;
    white-space: nowrap;
    padding:12px 40px;
    transition:200ms ease-in;
}

.button:hover:before {
    max-width:100%; 
}   

ここにフィドルがあります：

https://jsfiddle.net/metaheavies/od6ko01b/

ありがとう！