css美化分隔符 hr 样式
3年前
超过1263天
温馨提示
本文最后更新于2021年06月07日，已超过1263天没有更新，若内容或图片失效，请留言反馈。
效果如图
在 _core/style.less 或者 main.css 中增加样式如下，注意需要引入 FontAwesome v4.7.0 版本的 CSS 文件。HanShan 主题已经默认引入了，可以直接使用。引入链接如下：
<link type='text/css' rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" media='all'/>
/* 美化 hr 样式 */
hr {
position: relative;
margin: 2rem auto;
width: calc(100% - 4px);
border: 2px dashed #a4d8fa;
background: #fff;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
hr:before {
position: absolute;
top: -10px;
left: 5%;
z-index: 1;
color: #49b1f5;
content: '\f0c4';
font: normal normal normal 14px/1 FontAwesome;
font-size: 20px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
hr:hover::before{
left: 95%;
}
文章来源于：https://bestzuo.cn/posts/halo-beauty.html
0 赞
or 打赏
喜欢就打赏一点
下一篇
