position:absoluteで指定すると線が消えてしまうのを解決したい

Question

html

  <ul>
      <li>a
      </li>
      <li>a
      </li>
      <li>a
      </li>
    </ul>


css
コードul {
  display: flex;
  justify-content: center
}

li {
  list-style: none;
  padding: 10px 30px;
  background: #aaa;

}

li + li:before {
  content: '';
  background: #fff;
  width: 3px;
  height: 30px;
  position:absolute;
  left: -200%;
  display: inline-block;
  vertical-align: middle
   
}

``li + li:before{position:relative}
にしたら線が現れたのですが何故なのか仕組みを教えていただきたいです。`

Comments

[kei344]

過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問を編集するなどしてみてください。

[yambejp]

表示崩れています
きちんとマークダウンしてください

[m.ts10806]

質問投稿前にプレビュー確認して調整のうえ投稿してください。
質問は赤の他人が初めて見るものです。急いだり焦ったとてきちんと伝わらないと無駄な時間がかかるばかりです。

Answer 1

position: absolute; とすると包含ブロックからの配置となるため、表示領域外に飛び出してしまっています。
https://developer.mozilla.org/ja/docs/Web/CSS/position
https://developer.mozilla.org/ja/docs/Web/CSS/Containing_Block

li に position: relative; とすることで包含ブロックになり、li からの配置にできます。

li {
  position: relative;
}

CSS 2.1 仕様：
https://www.w3.org/TR/CSS2/visuren.html#propdef-position
http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html#propdef-position