While working on a page, I encountered an issue where a simple <hr> tag was not displaying. After some investigation, I noticed that if there are multiple <hr> tags on the page, only the first one would not show up while the others did. I have tried various combinations to resolve this problem without success. Even in my browser's developer tools, I couldn't find any discernible difference between the invisible and visible <hr> tags.
Here is an example of the code snippet:
<div>
<p>A</p>
<hr>
<p>B</p>
<hr>
<p>C</p>
</div>
Only the line between B and C is visible.
Does anyone have any insight into what might be causing this issue?
For reference, I am using Bootstrap 4 and have not made any CSS alterations to the <hr> tag.
Edit:
I attempted to add some CSS to modify the border, resulting in the following output:
https://i.sstatic.net/yyoof.png
The upper line appears noticeably thinner. Below is the CSS used:
hr {
border-top: 5px solid black;
}