Active link border/underline - css

Question

I would like to put an underline on the active icon link. I am able to underline but it is too close to the icon but I want to underline at the bottom-top of the navigation bar as shown in the image below.
* {
margin: 0;
padding: 0;
}
.header {
display: flex;
justify-content: space-between;
padding: 15px 20px;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
.header__left>img {
height: 40px;
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
.header__option {
display: flex;
align-items: center;
padding: 0 2vw;
cursor: pointer;
height: 52px;
}
.header__right {
display: flex;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
}
.header__info>span {
margin-left: 10px;
}
.header__option.active>i {
color: #1877f2;
border-bottom: 1px solid red;
border-bottom-width: 3px;
bottom: 0;
}
.header__option:hover {
background-color: #f0f2f5;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<div class="header">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
</div>
<div class="header__center">
<div class="header__option active">
<i class="fas fa-home"></i>
</div>
<div class="header__option">
<i class="fas fa-users"></i>
</div>
<div class="header__option">
<i class="fas fa-video"></i>
</div>
</div>
<div class="header__right">
<div class="header__info">
<i class="fas fa-user-circle fa-lg"></i>
<span class="header__info__name">Aakash</span>
</div>
</div>
</div>
What is the way of underlining the icon with the exact width that is taken while hovering over the icons?

Answer 1

You need to apply the border on the parent element of the icon
* {
margin: 0;
padding: 0;
}
.header {
display: flex;
justify-content: space-between;
padding: 15px 20px 0px 20px; /* was padding: 15px 20px */
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
/* added below four lines for image centering */
.header__left {
display: flex;
align-items: center;
}
.header__left>img {
height: 40px;
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
.header__option {
display: flex;
align-items: center;
padding: 0 2vw;
cursor: pointer;
height: 52px;
}
.header__right {
display: flex;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
}
.header__info>span {
margin-left: 10px;
}
/* added below four lines for bottom border on active link */
.header__option.active {
border-bottom: 1px solid red;
border-bottom-width: 3px;
}
.header__option.active>i {
color: #1877f2;
/* removed border-bottom, border-bottom-width and bottom rules */
}
.header__option:hover {
background-color: #f0f2f5;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<div class="header">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
</div>
<div class="header__center d-none d-xl-flex d-md-flex">
<div class="header__option active">
<i class="fas fa-home"></i>
</div>
<div class="header__option">
<i class="fas fa-users"></i>
</div>
<div class="header__option">
<i class="fas fa-video"></i>
</div>
</div>
<div class="header__right">
<div class="header__info d-none d-xl-flex">
<i class="fas fa-user-circle fa-lg"></i>
<span class="header__info__name">Aakash</span>
</div>
</div>
</div>

Answer 2

It's better to use pseudo elements (::after & ::before) for active states and for the underline.
.header__option{
position: relative;
}
.header__option.active::after{
content:'';
position: absolute;
bottom: -10px; (set it accordingly)
left: 0;
width: 100%;
height: 1px;
background: red;
}

Answer 3

* {
margin: 0;
padding: 0;
}
.header {
display: flex;
justify-content: space-between;
padding: 15px 20px 0;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
}
.header__left>img {
height: 40px;
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
.header__option {
display: flex;
align-items: center;
padding: 0 2vw;
cursor: pointer;
height: 52px;
}
.header__right {
display: flex;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
}
.header__info>span {
margin-left: 10px;
}
.header__option.active {
color: #1877f2;
border-bottom: 1px solid red;
border-bottom-width: 3px;
}
.header__option:hover {
background-color: #f0f2f5;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<div class="header">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
</div>
<div class="header__center d-none d-xl-flex d-md-flex">
<div class="header__option active">
<i class="fas fa-home"></i>
</div>
<div class="header__option">
<i class="fas fa-users"></i>
</div>
<div class="header__option">
<i class="fas fa-video"></i>
</div>
</div>
<div class="header__right">
<div class="header__info d-none d-xl-flex">
<i class="fas fa-user-circle fa-lg"></i>
<span class="header__info__name">Aakash</span>
</div>
</div>
</div>

Answer 4

Here is the working example:
* {
margin: 0;
padding: 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
padding-left: 15px;
padding-right: 15px;
}
.header__left>img {
height: 40px;
}
.header__left .header__option, .header__right .header__option, .header__center .header__option {
height: 60px;
min-width: 60px;
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
.header__option {
display: flex;
align-items: center;
padding: 0 2vw;
cursor: pointer;
justify-content: center;
}
.header__right {
display: flex;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
}
.header__info>span {
margin-left: 10px;
}
.header__option.active, .header__option.active:hover {
color: #1877f2;
border-bottom: 1px solid red;
border-bottom-width: 3px;
}
.header__option:hover {
background-color: #f0f2f5;
border-bottom: 1px solid #dedede;
border-bottom-width: 3px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<div class="header">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
</div>
<div class="header__center">
<div class="header__option active">
<i class="fas fa-home"></i>
</div>
<div class="header__option">
<i class="fas fa-users"></i>
</div>
<div class="header__option">
<i class="fas fa-video"></i>
</div>
</div>
<div class="header__right">
<div class="header__info d-none d-xl-flex">
<i class="fas fa-user-circle fa-lg"></i>
<span class="header__info__name">Aakash</span>
</div>
</div>
</div>