我有一个来自 Internet 的很棒的按钮，它具有显示朝右箭头的功能。现在，我有另一个按钮，它转到上一页，所以常识会告诉按钮上的箭头应该指向左边。
所以我将所有与右动画有关的值都更改为左动画的值，但它并不完全有效。
我不太了解这一点，这就是为什么我想问是否有人对此有更好的了解可以帮助我。
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
width: 200px;
}
.button > span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button > span:after {
content: ' »';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover > span {
padding-right: 25px;
}
.button:hover > span:after {
opacity: 1;
right: 0;
}<button class='button'><span>Back</span>
</button>
<button class='button'><span>Again</span>
</button>我在 common.css 中有这个 CSS，它定义了一个“标准”按钮，在找到这个 HTML 的页面的样式表中，它改变了一些 CSS(所以这里必须针对我的问题进行更改)以满足页面的需要。
CSS:
li:last-child .button {
width: 200px;
font-size: 22px;
padding: 13px;
}
如果有人能帮我解决这个问题，我会很高兴。
干杯
编辑:
common.css 中的 .button 也有一个 width 属性。
最佳答案
这样做:
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button > span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.forward > span:after {
content: ' »';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.back > span:after {
content: '« ';
position: absolute;
opacity: 0;
top: 0;
left: 0px;
transition: 0.5s;
}
.forward:hover > span {
padding-right: 25px;
}
.back:hover > span {
padding-left: 25px;
}
.forward:hover > span:after {
opacity: 1;
right: 0;
}
.back:hover > span:after {
opacity: 1;
left: 0;
}<html>
<body>
<button class='button back'><span>Back</span>
</button>
<button class='button forward'><span>Again</span>
</button>
</body>
</html>看看这个 fiddle :https://jsfiddle.net/L04y8m9e/
作为替代方案，如果您真的真的需要保留原始 css，那么解决方案是将后退按钮的类从“按钮”更改为“后退按钮”，这样标准按钮 css 就不再适用，然后将所有按钮样式复制到新的“后退按钮”样式，进行必要的更改。
请参阅此 fiddle :https://jsfiddle.net/vg0oLuLh/
新版html:
<button class='backbutton'><span>Back</span></button>
<button class='button'><span>Again</span></button>
要添加的新 css(旧 css 保持不变):
.backbutton {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
width: 200px;
}
.backbutton > span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.backbutton > span:after {
content: '« ';
position: absolute;
opacity: 0;
top: 0;
left: 0px;
transition: 0.5s;
}
.backbutton:hover > span {
padding-left: 25px;
}
.backbutton:hover > span:after {
opacity: 1;
left: 0;
}
关于HTML/CSS - 将按钮更改为指向相反的方向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39888716/