带按钮的 CSS 过渡，无跨度覆盖文本

Question

任何人都可以帮助我解决使用::after的按钮效果问题？ 我对::after内容位于悬停按钮的文本顶部有问题。

JSFiddle： https ://jsfiddle.net/pegues/yh4g2cme/

 .button { position: relative; margin: 10px; padding: 16px 18px; color: #fff; font-family: Arial, Helvetica, Sans-serif; font-size: 1.00rem; line-height: 1.35rem; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; overflow: hidden; border: 0 none; background-color: #556f6e; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out; -ms-transition: all 0.20s ease-in-out; -o-transition: all 0.20s ease-in-out; transition: all 0.20s ease-in-out; } .button span { position: relative; z-index: 1; font-weight: inherit; } .button::after { position: absolute; top: 0; left: 0; z-index: 0; display: block; width: 4px; height: 100%; content: ' '; background-color: #7cab4c; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out; -ms-transition: all 0.20s ease-in-out; -o-transition: all 0.20s ease-in-out; transition: all 0.20s ease-in-out; } .button:hover::after { width: 100%; }

 <br/> <a class="button" href="#" title="" target="_blank"><span>With Span</span></a> <a class="button" href="#" title="" target="_blank">Without Span</a>

如果我在锚标签内用span包裹文本，然后我可以添加position: relative; z-index: 1; position: relative; z-index: 1; 到那个跨度，我的问题就解决了。 但是我不能在整个站点中使用.button所有锚标记中放置span 。

Answer 1

我们可以使用::before

 .button { position: relative; margin: 10px; padding: 16px 18px; color: #fff; font-family: Arial, Helvetica, Sans-serif; font-size: 1.00rem; line-height: 1.35rem; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; overflow: hidden; border: 0 none; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out; -ms-transition: all 0.20s ease-in-out; -o-transition: all 0.20s ease-in-out; transition: all 0.20s ease-in-out; } .button::before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #556f6e; z-index: -2; } .button::after { content: ' '; position: absolute; top: 0; left: 0; display: block; width: 4px; height: 100%; background-color: #7cab4c; z-index: -1; -webkit-transition: all 0.20s ease-in-out; -moz-transition: all 0.20s ease-in-out; -ms-transition: all 0.20s ease-in-out; -o-transition: all 0.20s ease-in-out; transition: all 0.20s ease-in-out; } .button:hover::after { width: 100%; }

 <br /> <a class="button" href="#" title="" target="_blank"><span>With Span</span></a> <a class="button" href="#" title="" target="_blank">Without Span</a>

background-size属性也可以做到这一点。 没有伪元素。

 .button { position: relative; margin: 10px; padding: 16px 18px; display: inline-block; color: #fff; font-family: Arial, Helvetica, Sans-serif; font-size: 1.00rem; line-height: 1.35rem; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; overflow: hidden; border: 0 none; background: linear-gradient(#7cab4c, #7cab4c), #556f6e; background-size: 4px 100%; background-repeat: no-repeat; transition: all 0.20s ease-in-out; } .button:hover { background-size: 100% 100%, 100% 100%; }

 <a class="button" href="#" title="" target="_blank">Read More</a>