I've been exploring ways to enhance the box-shadow effect on my flex elements, taking inspiration from this insightful article.
Unfortunately, I'm running into issues as the implementation is not functioning correctly. Here's a demo of the problem: example.
One attempt I made was setting the position: relative property on the nav element, but it resulted in the ::after element occupying the entire navbar.
<nav>
<div class="nav-left">
<a href="#">
hello
</a>
</div>
<div class="nav-center"></div>
<div class="nav-right"></div>
</nav>
nav {
display: flex;
min-height: 5rem;
background-color: #402424;
align-items: stretch;
}
nav a,
nav .brand {
text-decoration: none;
align-items: center;
display: flex;
color: #AFAFAF;
}
nav a::after {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
transition: opacity 0.3s ease-in-out;
}
nav a:hover::after {
opacity: 1;
}