Optimize CSS-based navigation menu with dynamic lines

by davidxmartins

HTML

<nav class="navbar">
  <a href="produtos.php" class="nav-link">PRODUTOS</a>
  <a href="index.php" class="logo">...</a>
  <a href="empresa.php" class="nav-link">EMPRESA</a>
</nav>

CSS

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  padding-top: 50px;
  font-family: system-ui, sans-serif;
  --brown: #8B4513;
}

.nav-link {
  position: relative;
  font-weight: 700;
  font-size: 20px;
  color: var(--brown);
  text-decoration: none;
  padding: 12px 0;
  display: inline-block;
  transition: letter-spacing 0.3s ease;
}

.nav-link::before,
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;                     /* ← the magic fix */
  height: 3px;
  background: var(--brown);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.nav-link::before { top: 0; }
.nav-link::after  { bottom: 0; }

.nav-link:hover {
  letter-spacing: 2.5px;
}

.nav-link:hover::before,
.nav-link:hover::after {
  transform: scaleX(1.065);        /* grows perfectly with the text */
}

/* your logo stays untouched */
.logo {
  width: 100px;
  height: 60px;
  background: #ddd;
  text-align: center;
  line-height: 60px;
  font-size: 12px;
  transition: transform 0.3s ease;
}
.logo:hover { transform: scale(1.03); }