I'm trying to animate the width of a navbar in the following code.
The navbar should expand in width when hovered over, but I want only the nav-title__text to grow, while the icon remains the same size. However, the SVG icon slightly shifts to the left during the animation.
What is causing this, and how can I prevent it?
:root { font-family: sans-serif;}* { padding: 0; margin: 0;}body { height: 100vh; width: 100vw; background-color: #fff;}nav { height: 100%; background-color: #23232e; width: 4rem; transition: width 1s ease-in; display: flex; flex-direction: column; justify-content: flex-start;}nav:hover { width: 10rem; color: white;}.nav-title { display: flex; align-items: center; justify-content: flex-start; padding-top: 1rem;}.nav-title>svg { height: 2rem; flex-grow: 0;}.nav-title__text { flex-grow: 0; overflow: hidden; width: 0;}nav:hover .nav-title__text { width: fit-content;}<nav><div class="nav-title"><svg width="80" height="80" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ff69b4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M1.75 11 8 14.25 14.25 11M1.75 8 8 11.25 14.25 8M8 1.75 1.75 5 8 8.25 14.25 5z" /></svg><div class="nav-title__text"> Title</div></div></nav>