很多网站都有的一个小美化,好看实用,在标题前方加上一个小方块,喜欢的自行下载使用。
使用教程
把下方的代码放入CSS文件中即可,标题前方会多出两个小圆形形状
/*文章内页样式美化开始*/ :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .single-article .entry-content > h2::before, .single-article .entry-content > h3:before, .single-article .entry-content > h4:before, .single-article .entry-content > h5:before, .single-article .entry-content > h6:before { margin: 25px 0; content: ""; border-left: 10px solid var(--b2color); display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 15px; vertical-align: middle; opacity: .9; } .single-article .entry-content > h2:after, .single-article .entry-content > h3:after, .single-article .entry-content > h4:after, .single-article .entry-content > h5:after, .single-article .entry-content > h6:after { margin: 25px 0; content: ""; opacity: .3; border-left: 15px solid var(--b2color); display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; position: absolute; left: 8px; } .single-article .entry-content > h2, .single-article .entry-content > h3, .single-article .entry-content > h4, .single-article .entry-content > h5, .single-article .entry-content > h6 { margin: 25px 0; position: relative; font-size: 22px; font-weight: 600; display: flex; align-items:center; } /*文章内页样式美化结束*/
THE END
评论