他のところは表示されています
devtools の Elements タブで見ても hr タグには特別なスタイルは当たっていないようです
原因は親要素が display: flex かつ縦並びになっていたことでした
<div style="
display: flex;
flex-direction: column;
">
<p>a</p>
<hr>
<p>b</p>
</div>
こういう HTML で再現できます
hr に width: 100% を指定することで hr を表示できます
ですが align-items のデフォルトは stretch なので width: 100% を指定しなくても横幅いっぱいになるはずです
実際の値を見てみても stretch になっていました
なぜ width 指定なしでうまく表示されないのでしょうか
もう少しあれこれ見てみると原因はユーザーエージェントのデフォルトスタイルシートでした
Chrome 系ブラウザでは hr のマージン関係のデフォルトがこうなっています
margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: auto;
margin-inline-end: auto;
margin-inline が左右なのでこれが auto ということは中身のサイズに合わせて左右に自動でマージンが付きます
hr は中身が無いので幅が 0 になって表示されてないということでした
デフォルトは auto じゃなくて 0 でいいと思うのですけど
