Absolute positioned elements behaving weirdly

Question

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">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
      <a href="#">Blog</a>
      <a href="#">Careers</a>
    </div>
    <button type="button" class="hide-for-mobile header__cta">
          Request Invite
        </button>
  </nav>
</header>

score 0 · Answer 1 · answered Feb 20 '22 at 19:45

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">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
      <a href="#">Blog</a>
      <a href="#">Careers</a>
    </div>
    <button type="button" class="hide-for-mobile header__cta">
          Request Invite
        </button>
  </nav>
</header>

what's the relation between the fact that pseudo element are inline element and adding inline-block to another element? — Temani Afif, Feb 20 '22 at 20:08
@TemaniAfif because the OP specified `display: block;` on the `:after`. Assuming they were using that for a reason, `display: inline-block;` was needed on `a` for the pseudo-elements to align as `:after` intends. — Kameron, Feb 20 '22 at 21:25
@TemaniAfif if my reasoning is skewed ~ I'm fully open to a lesson :) — Kameron, Feb 20 '22 at 21:59

Absolute positioned elements behaving weirdly

1 Answers1