I can’t see my <hr> tag (horizontal line), where did it go?

If you can’t see your <hr> tag, your best bet might be that it somehow got display: flex . This will cause the hr to have width 0. Test it by giving it the style <hr style="width: 100%"> and see whether this solves your problem. For example, if you use an Angular Material Design Card md-card, they use display:flex for the card, so hr’s won’t show up.

Here’s a little code snippet to illustrate:

<!-- notice the red dot in the middle? it's the hr -->
<div style="display: flex; border: 1px solid red">
 <hr style="border: 1px solid red">


<!-- with width 100% it's normal again -->
<div style="display: flex; border: 1px solid blue">
 <hr style="width: 100%">

and here’s the corresponding fiddle: https://jsfiddle.net/f327rq20/

Leave a comment

Your email address will not be published.