任何人都可以通过使用按钮帮助我解决问题::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%;
}
With Span
Without Span
如果我span在锚标记内包裹文本，则可以添加position: relative; z-index: 1;到该跨度中，问题就解决了。但我无法span在.button整个网站的所有锚定标记中都放一个。
我用 ::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%;
}
With Span
Without Span
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 
