Не появляется черная полоса под элементами

//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 &amp; 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>


Ответы (1 шт):

Автор решения: azlov

попробуйте указать border: 1px solid @black;

→ Ссылка