会员仅38元起,全站资源无限制ALL免费下载!

7B2主题美化-文章标题前方加小圆块

文章最后更新时间:2025-04-17 06:27:19

7B2主题美化-文章标题前方加小圆块文章源自奇客源码-https://www.qkget.cn/3491.html

很多网站都有的一个小美化,好看实用,在标题前方加上一个小方块,喜欢的自行下载使用。文章源自奇客源码-https://www.qkget.cn/3491.html

使用教程文章源自奇客源码-https://www.qkget.cn/3491.html

把下方的代码放入CSS文件中即可,标题前方会多出两个小圆形形状文章源自奇客源码-https://www.qkget.cn/3491.html

[wxgzh key=1718 reply=验证码]文章源自奇客源码-https://www.qkget.cn/3491.html

/*文章内页样式美化开始*/
: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;
}
/*文章内页样式美化结束*/

[/wxgzh]文章源自奇客源码-https://www.qkget.cn/3491.html

温馨提示:若内容/图片/下载链接失效,请在下方留言或登录后私信站长
© 版权声明
THE END
点赞7赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容