Box-sizing：border-box不能处理伪元素

Question

我正在尝试将box-sizing：border-box应用于没有运气的伪元素 - 效果所需的填充 - 阻止伪元素的最大宽度（或宽度）为0 - 它＆＃ 39; s总是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/

谢谢！