Не появляется черная полоса под элементами
//main: ../style.less
.nav{display: flex;
height: 100%;
}
.nav_link{
//padding: 0.66rem 2rem;
margin-left: 2rem;
position: relative;
font-size: 0.93rem;
color:@black;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
//border: 2px solid transparent;
border-radius: 20px;}
&:after{content: "";
display: block;
width: 100%
height:2px;
background-color:@black;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;}
&:hover,
&.active{border-color:@black; }
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" contect="width=device-width,initial-scale=1">
<title>Portfolio</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="header__inner">
<div class="user">
<div clsass="user__avatar">
<img src="http://placehold.it/57/333" alt="">
</div>
<div class="user__content">
<div class="user__name">Lewis<br>
Nathaniel
</div>
<div class="user__prof">UI & UX Designer</div>
</div>
</div>
<nav class="nav">
<a class="nav_link" href="#">work</a>
<a class="nav_link" href="#">about me</a>
<a class="nav_link" href="#">blog</a>
<a class="nav_link" href="#">contact</a>
<a class="nav_link" href="#">hire me</a>
</nav>
</div>
</div>
</header>
</body>
</html>