I'm styling some links with the following CSS code, I named the links with the className 'nav-menu-link':
.form-header {
background-color: var(--background-color);
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease-out;
position: relative;
width: 100%;
height: 100px;
}
.form-logo {
display: flex;
align-items: center;
cursor: pointer;
}
.image-logo-container {
box-sizing: border-box;
display: flex;
width: initial;
height: initial;
background: none;
opacity: 1;
border: 0;
margin: 0;
padding: 0;
max-width: 100%;
}
.image-logo-container img {
width: 250px;
height: 52px;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.nav-menu {
display: flex;
font-size: 18px;
width: 380px;
align-items: center;
justify-content: space-between;
justify-content: center;
height: 100%;
margin: unset;
}
.nav-menu-item {
display: flex;
height: 100px;
align-items: center;
margin-left: 50px;
}
.nav-menu-link {
display: flex;
height: 100%;
align-items: center;
color: rgba(255, 255, 255, 0.5);
border-bottom: 2px solid transparent;
}
.nav-menu-link.active {
font-weight: bold;
color: var(--white);
}
.nav-menu-link:hover {
color: var(--white);
border-bottom: 2px solid var(--explorer);
transition: all .2s ease-in-out;
}
@media (min-width: 998px) {}
@media (min-width: 768px) {}<header class="form-header">
<div class="nav-container">
<a class="form-logo" id="navbar-link-form-logo" href="/">
<div class="image-logo-container">
<img src="https://placekitten.com/250/52" alt="" />
</div>
</a>
<nav class="container">
<ul class="row nav-menu">
<li class="nav-menu-item">
<a class="nav-menu-link active" href="/">Home</a>
</li>
<li class="nav-menu-item">
<a class="nav-menu-link" href="/form">Form</a>
</li>
<li class="nav-menu-item">
<a class="nav-menu-link" href="/about">About</a>
</li>
</ul>
</nav>
<ul>
</ul>
</div>
</header>I did two effects, one is when the link is active with the '.active' class, and another is when I hover over the link with the 'hover'.
In pure CSS, the correct way to do these two effects is as I wrote in the code above?