1

我正在尝试将 box-sizing:border-box 应用于没有运气的伪元素 - 填充 - 效果所必需的 - 正在防止伪元素的最大宽度（或宽度）为 0 - 它始终为 0 + padding .

我要应用它的元素是一个<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/metahavies/od6ko01b/

谢谢！

4

0 回答 0