Underline that draws in

<nav><a href="#">Work</a><a href="#">About</a><a href="#">Journal</a><a href="#">Contact</a></nav>

nav{display:flex;gap:34px;font-size:1.3rem;flex-wrap:wrap;justify-content:center}
a{position:relative;color:#fffffc;text-decoration:none;padding:4px 0}
a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#f08a5d;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
a:hover::after,a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
a:focus-visible{outline:2px solid #f08a5d;outline-offset:6px}

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Underline grow</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
nav{display:flex;gap:34px;font-size:1.3rem;flex-wrap:wrap;justify-content:center}
a{position:relative;color:#fffffc;text-decoration:none;padding:4px 0}
a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#f08a5d;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
a:hover::after,a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
a:focus-visible{outline:2px solid #f08a5d;outline-offset:6px}
</style></head>
<body>
<nav><a href="#">Work</a><a href="#">About</a><a href="#">Journal</a><a href="#">Contact</a></nav>
</body></html>