The HTML<hr> tag represents the separator line by default, but the browser’s default separator line is so ugly that we can beautify it with CSS.
Considering that the <hr> tag supports both ::before and :: After pseudo-elements, there’s a lot we can do, so using pure CSS plus HTML <hr> tags, we can achieve a wide variety of underline effects.
Screenshot of the effect:
All very succinct and useful underline effects.
All of the above implementations are open source on Gitee.
The address is: https://gitee.com/zhangxinxu/css-hr
Hr.css is the implemented CSS and index.html is the preview page.
Welcome to fork the project and add other useful CSS underlining effects.
Also welcome to follow my Gitee account. In the future, small but beautiful scripts, projects and experiments will be open source on Gitee, because Github is not very stable. For me, time and experience are more important.
By the way, if you are interested in principle and the details of implementation, access to this article, www.zhangxinxu.com/wordpress/?…
There are details in it.
The above –