绝对定位元素行为怪异

Question

我是跟随一个教程在Youtube上建立一个响应网站，到目前为止，很好。但我遇到了一个奇怪的问题，我试图做一个底部梯度边界。我跟踪了视频，在视频中他们使用的位置:绝对，这一切都工作得很好。但是，当我尝试相同的代码时，第一个元素的边框似乎出现在顶部，而其他元素出现在底部。我通过添加底部: 0计算出了解决方案。但是在视频中，编码器没有添加，为什么呢？我猜不同浏览器的行为会有所不同吧？

​

下面是我用于标记的代码：

​

.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>

​

Answer 1

默认情况下，pseudo-elements是内联的，所以将display: inline-block;添加到.header__links a中，如果您想在文本后面添加内容，则使用:after。

​

.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>

​