Css 框大小：边框框不适用于伪元素

我正在尝试将框大小：边框框应用于一个伪元素，但没有运气-填充-效果所需-阻止伪元素的最大宽度或宽度为0-它始终是0+填充

我要应用它的元素是

---

谢谢

不确定你想要的效果是什么。但这是你想要的方式吗？谢谢Michaël-除了文本颜色的闪烁之外，你几乎已经得到了它。如果在我的小提琴上移除a和a:before元素上的填充，它将正常工作-在悬停时：before元素的白色文本将被固定在适当的位置并平滑显示。但是，填充+边框会导致不必要的问题。我会看看我是否能让你的工作正常。只是一个说明-我真的想了解为什么填充会影响框模型-据我所知，添加一个显式边框框应该可以使它正常工作，即最大宽度：0。你根本不应该看到黑色背景。通过使用Michael的代码，你可以非常接近我想要的并在：after元素上添加颜色过渡，使过渡更加平滑。我仍然很想知道发生了什么，但这对我来说很有效。

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

.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%; 
}