input 元素focus问题？

Question

CSS：

html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.code {
  width: 5%;
  margin: 20px;
  position: relative;
}

.code::after {
  content: '';
  display: block;
  width: 100%;
  padding-top: 100%;
}

.code input {
  position: absolute;
  width: 100%;
  height: 100%;
}

HTML：

<div class="container">
  <div class="code">
    <input type="text" name="" value="">
  </div>
  <div class="code">
    <input type="text" name="" value="">
  </div>
  <div class="code">
    <input type="text" name="" value="">
  </div>
  <div class="code">
    <input type="text" name="" value="">
  </div>
</div>

我的本意是想让四个input显示为四个密码框的样子。其中.code::after是为了让密码框显示为宽高自动调整的正方形。效果如下图所示：

我的问题是，为什么当我点击网页上半部分时，会自动聚焦到第一个Input，当我点击网页下半部分时，会自动聚焦到最后一个input，这是为什么呢？感觉是因为.code::after的缘故，但是不知道原理，请教大家！谢谢！

可以点这里测试问题效果：问题测试

Answer 1

我把.code::after改成.code::before就正常了。只不过此时需要把input设置为top: 0.

问题虽然解决了。但还是不知道原问题出现的原理。。。。