我正在尝试制作一个由带动画下划线的按钮组成的简单导航菜单。我正在使用reactjs-lib
如果按钮元素处于活动状态，我不知道如何立即显示下划线。
.btn {
position: relative;
text-transform: uppercase;
color: whitesmoke;
font-size: 1.4rem;
cursor: pointer;
}
.btn:hover {
color: whitesmoke;
text-decoration: none;
}
.btn:before {
content: "";
position: absolute;
width: 100%;
height: 0.105rem;
left: 0;
bottom: 0;
visibility: hidden;
background-color: whitesmoke;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.btn:hover:before {
transform: scaleX(1);
visibility: visible;
}
button.active .btn:before {
visibility: visible;
transform: scaleX(1);
}<a href="/">
<button id="home" className="btn active">
Home
</button>
</a>
</div>
<div className="col-4 col-sm-2">
<a href="/blog">
<button id="blog" className="btn">
Blog
</button>
</a><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<a href="/">
<button id="home" class="btn active">
Home
</button>
</a>
</div>
<div className="col-4 col-sm-2">
<a href="/blog">
<button id="blog" class="btn">
Blog
</button>
</a>
</body>
</html>
.btn {
position: relative;
text-transform: uppercase;
color: whitesmoke;
font-size: 1.4rem;
cursor: pointer;
border: none;
outline: none;
background-color: #332e2e77;
display: inline-block;
margin-bottom: 2rem;
}
a {
display: inline-block;
}
.btn:hover {
color: whitesmoke;
text-decoration: none;
}
.btn::before {
content: '';
position: absolute;
width: 0%;
height: 0.105rem;
left: 0;
bottom: 0;
visibility: hidden;
background-color: rebeccapurple;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.btn:hover::before {
width: 100%;
visibility: visible;
}
.btn.active {
position: relative;
}
.btn.active::after {
content: '';
position: absolute;
width: 100%;
height: 0.105rem;
left: 0;
bottom: 0;
background-color: rebeccapurple;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
现在尝试悬停。className->注释中所述的类别我使用了宽度0%->宽度100%；并适当地下划线动画。
.btn:悬停：：在之前
>你选择伪选择器的方式