Horizontal rules can be hard to notice/invisible when gray backgrounds are used

[MartijnCuppens]

<hr>s can be hard to notice since they use the global border color. A workaround could be to use currentColor as border color:

https://codepen.io/MartijnCuppens/pen/GRoVeOy?editors=1100

What do you think?

[simonswiss]

Hey - thanks for the suggestion!

Could definitely be useful, but also sometimes a bit too "harsh" when the intent is a more subtle divider? You can always apply a current border-color class to the <hr/> if you want for the situations where the default border color lacks contrast:

<hr class="border-current" />

Thoughts?

[MartijnCuppens]

Yeah sure, that's possible!

a bit too "harsh" when the intent is a more subtle divider

This could be resolved by adding an opacity. This way the <hr> color will still adjust to the text color: https://codepen.io/MartijnCuppens/pen/QWNGMpL?editors=1100

<hr>s arealso often added by wysiwyg editors, making it a little harder to add classes.

Thoughts?

[simonswiss]

Moving this to discussions 👍

Your argument of the hr coming from a WYSIWYG is a good one!

The typography plugin helps with styling "CMS content" like that. I can also imagine scenarios where you'd want the hr color to be different from the text color.

It probably really Just Depends ™ from project to project