纯CSS3按钮边框线条动画特效--底部边框hover从中点向两侧变长

html：

<a href=‘‘ class=‘ui-box bottom-inOutSpread‘>Audio Description</a>

css：

.ui-box {    text-decoration:none;    border:none;    font-family:‘Roboto‘, sans-serif;    font-size:14px;    position:relative;    vertical-align:baseline;    padding:10px}.bottom-inOutSpread:before,.bottom-inOutSpread:after,.bottom-inOutSpread>.ui-border-element:before,.bottom-inOutSpread>.ui-border-element:after {    content:‘‘;    position:absolute}.bottom-inOutSpread:after {    border-bottom:2px solid #333;    left:51%;    right:51%;    bottom:0px;    -webkit-transition-property:all;    -moz-transition-property:all;    -o-transition-property:all;    transition-property:all;    -webkit-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);    -moz-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);    -o-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);    transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);    -webkit-transition-duration:200ms;    -moz-transition-duration:200ms;    -o-transition-duration:200ms;    transition-duration:200ms;    -webkit-transition-delay:0s;    -moz-transition-delay:0s;    -o-transition-delay:0s;    transition-delay:0s}.bottom-inOutSpread:hover:after {    left:0%;    right:0%}.bottom-inOutSpread:not(:hover):after {    -webkit-transition-delay:0s;    -moz-transition-delay:0s;    -o-transition-delay:0s;    transition-delay:0s}