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

【问题标题】：How can I set default hover::after/active state?如何设置默认悬停::之后/活动状态？
【发布时间】：2022-01-24 17:30:55
【问题描述】：

有一个用于下划线的 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);
}

【问题讨论】：

你想要达到什么目的？
你想要你可以用 javascript 来实现，你使用 ::after 用于不同的目的，你在 after 内部设置转换和转换，这没有意义......之后是描述相对于元素的位置，它不是一个事件..
或者你可以使用延迟transition-delay: 250ms;过渡属性：margin-right;
试图让 className='active' 将按钮设置为带下划线
设置背景颜色：黑色；对 .btn 来说，你遇到的问题是一个不好的对比......

标签： javascript html css reactjs

【解决方案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);
}

&lt;button class="btn active"&gt;Button&lt;/button&gt;

【讨论】：

嗯，但我喜欢将按钮设置为默认带有下划线的 className="active"