CSS转换右转

Question

我需要在此代码中添加一个CSS转换，以便在悬停时按钮的宽度平滑变化，但我无法使其正常工作。

http://jsfiddle.net/AlexeyKosov/fa9c6nfc/1/

HTML：

<button class="btn btn-default">
    <span class="fa fa-check"></span>
    <span class="caption">Button text</span>
</button>

CSS：

.btn .caption {
    display: none;
}
.btn:hover .caption {
    display: inline;
}

Answer 1

您应该使用max-width。

.btn .caption {
    max-width: 0px;
    display: inline-block;
    overflow: hidden;
    transition: all 2s linear;
}
.btn:hover .caption {
    max-width: 999px;
}

http://jsfiddle.net/fa9c6nfc/2/