同时执行CSS转换

Question

所以，我有一个按钮，它的末尾添加了一个Font Awesome图标。我在按钮上使用:after来显示图标，效果很好。

我有一个易于转换的CSS，但它并不像我期望的那样工作。我希望按钮文本和:after文本同时轻松。现在，按钮文本减轻，然后:after文本减轻。。。而不是一个流体过渡。这就像是因为转换而延迟了0.5秒。

这是我的按钮代码：

.gform_button {
background: #363794;
border: 2px solid #363794;
border-radius: 50px;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;
letter-spacing: 1px;
margin: 20px 0 0;
padding: 15px;
text-decoration: none;
text-transform: uppercase;
transition: all 0.5s ease;
}
.gform_button:hover {
color: #ff9b00;
cursor: pointer;
}
.gform_button:after {
color: #fff;
content: "f135";
font: var(--fa-font-solid);
font-size: 16px;
margin-left: 5px;
}
.gform_button:hover:after {
color: #ff9b00;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button class="button gform_button" id="gform_submit_button_1">
<span>Submit</span>
</button>

我很确定关键是我的转换标签，我想这是因为我有转换：all，因为我知道它会单独影响每个项目。我以前见过这种情况，所以(最初(我认为这是一个快速解决方案。我想如果我把all改成color，我就可以做生意了，但这仍然是一样的——按钮文本显示，0.5秒后:after显示。

我无法调整实际的代码，因为按钮是由WordPress网站生成的，这就是为什么大多数时候使用:after是一个很好的解决方案。

有没有一种方法可以让它们(按钮文本和:after(在转换时同时改变颜色？

Answer 1

这并不是说它们以不同的速度转换——文本是在转换颜色，而图标不是。悬停时图标会立即更改。

这是因为您已经在:after和:hover:after上指定了颜色值，并且它没有转换。

最明显的解决方案是还添加了一个转换，对吧？

但是，更好的是：相反，从:after选择器中删除color值，并让它继承父级的颜色！

(此外，你应该远离any，这是正确的——在大多数CSS属性上，转换的性能非常昂贵，所以你应该始终准确地指定你想要的(

.gform_button {
background: #363794;
border: 2px solid #363794;
border-radius: 50px;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;
letter-spacing: 1px;
margin: 20px 0 0;
padding: 15px;
text-decoration: none;
text-transform: uppercase;
transition: color 0.5s ease;
}
.gform_button:hover {
color: #ff9b00;
cursor: pointer;
}
.gform_button:after {
content: "f135";
font: var(--fa-font-solid);
font-size: 16px;
margin-left: 5px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button class="button gform_button" id="gform_submit_button_1">
<span>Submit</span>
</button>