如何设置默认悬停::在/活动状态之后

Question

有一个css动画用于下划线，但设置：

<button className="btn active">

似乎没有将动画的结尾设置为默认值。有人能告诉我我做错了什么吗？这是我的CSS：

.btn {
position: relative;
text-transform: uppercase;
color: whitesmoke;
transition: all 0.5s ease-in;
font-size: 1.3rem;
cursor: pointer;
}
.btn:hover {
color: white;
}
.btn:hover::after {
transform: scale(1, 1);
transition: transform 0.3s ease;
}
.btn::after {
content: "";
position: absolute;
width: 100%;
height: 0.105rem;
left: 0;
bottom: 0;
background: whitesmoke;
transform: scale(0, 1);
}
.btn:active {
transform: scale(1, 1);
}

Answer 1

.btn {
position: relative;
text-transform: uppercase;
color: whitesmoke;
transition: all 0.5s ease-in;
font-size: 1.3rem;
cursor: pointer;
}
.btn:hover {
color: white;
}
/* Expected selector ".btn::after" to come before selector ".btn:hover::after" */
.btn::after {
content: "";
position: absolute;
width: 100%;
height: 0.105rem;
left: 0;
bottom: 0;
background: whitesmoke;
transform: scale(0, 1);
}
/* Expected selector ".btn::after" to come before selector ".btn:hover::after" */
.btn:hover::after {
transform: scale(1, 1);
transition: transform 0.3s ease;
}

.btn:active {
transform: scale(1, 1);
}

<button class="btn active">Button</button>