Absolute positioned elements behaving weirdly [duplicate] - html

Question

This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Why is '::after' pseudo-selector over the image and not under it? [duplicate]
(3 answers)
Closed last year.
I am following a tutorial on Youtube to make a responsive website, so far so good. But I encountered a weird problem where I am trying to make a bottom gradient border. I followed the video and in it they used positon:absolute, which all worked great. But when I tried the same code it seems that the first element's border appears on the top while the others appear on the bottom. I figured out the solution by adding bottom: 0. But in the video the coder didn't add that, why so? I am guessing different browsers behave differently?
Here is the code I used for the markup:
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flex-jc-sb {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex-jc-c {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-ai-c {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header__links a {
font-size: 0.875rem;
position: relative;
}
.header__links a::before {
content: "";
position: absolute;
left: 0;
right: 0;
display: block;
height: 5px;
background: linear-gradient(to right, #31d35c, #2bb7da);
}
.header__links a:not(:last-child) {
margin-right: 32px;
}
<header class="header">
<nav class="flex flex-jc-sb flex-ai-c">
<a href="/" class="header__logo flex flex-ai-c">
<img src="images/logo.svg" alt="Easybank" />
</a>
<a href="#" class="header__menu hide-for-desktop">
<span></span>
<span></span>
<span></span>
</a>
<div class="header__links hide-for-mobile">
Home
About
Contact
Blog
Careers
</div>
<button type="button" class="hide-for-mobile header__cta">
Request Invite
</button>
</nav>
</header>

Answer 1

pseudo-elements are inline by default, so add display: inline-block; to .header__links a, and use :after if you want the content to come after (below) the text.
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flex-jc-sb {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex-jc-c {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-ai-c {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header__links a {
font-size: 0.875rem;
position: relative;
display: inline-block;
}
.header__links a:after {
content: "";
position: absolute;
left: 0;
right: 0;
display: block;
height: 5px;
background: linear-gradient(to right, #31d35c, #2bb7da);
}
.header__links a:not(:last-child) {
margin-right: 32px;
}
<header class="header">
<nav class="flex flex-jc-sb flex-ai-c">
<a href="/" class="header__logo flex flex-ai-c">
<img src="images/logo.svg" alt="Easybank" />
</a>
<a href="#" class="header__menu hide-for-desktop">
<span></span>
<span></span>
<span></span>
</a>
<div class="header__links hide-for-mobile">
Home
About
Contact
Blog
Careers
</div>
<button type="button" class="hide-for-mobile header__cta">
Request Invite
</button>
</nav>
</header>