はじめに
詳細な状況としては、liタグの子要素のdivブロックが親要素のliから何故かはみ出してしまっていた。そのため、liタグに設定した擬似要素が期待する位置に表示されなかった。（はみ出したdiv要素に被る）
理由を考察する。まず、liタグとdivの要素の違いではみ出してしまっているのかも？
ブロック要素とインライン要素の違いについて
- ブロック要素
- ブロック要素にはその前後で改行が入る
- ブラウザで縦並びとして表示されて、幅や高さや余白などを設定できる
- li, p, div, h1 など
- インライン要素
- インライン要素には改行が入らない
- 横並びに表示され、幅や高さや余白などが適応できない時がある
- span, aタグ など
同じブロック要素なので、要素の違いではなさそう。。
そもそもliタグにdiv要素入れても良いのだろうか？
li タグの中にdivタグを入れても良いのかについて
- liタグには上記ブロック要素もインライン要素も基本的にはどれでも入れても良いらしい
https://www.tohoho-web.com/html/li.htm
結論
親要素のliタグに height を設定していた。それを削除すると子要素のdivの高さを含むようになった。
どこかに height を指定しないかを確認しても良いかも。