后退
榜单

【子比兔出品】B2文章标题样式美化(标题前方加小圆块)

通知图标

正在访问 【子比兔出品】B2文章标题样式美化(标题前方加小圆块)

【子比兔出品】B2文章标题样式美化(标题前方加小圆块)

把下方的代码放入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;
}






/*文章内页样式美化结束*/
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
B2美化

【子比兔出品】B2小黑屋Darkroom页面美化

2024-8-13 9:08:01

B2美化

B2首页榜上有名注册用户展示

2024-12-20 7:43:17

2 条回复 A文章作者 M管理员
夸夸
夸夸
还有吗!没看够!
  1. 非凡

    大佬出手,必属精品!

    UID.0338
  2. fankeji

    对于大神的文章我真是百看不厌!

    UID.0419
个人中心
购物清单
优惠代劵
今日签到
有新私信 私信列表
快速搜索
联系客服
关注我们
  • 扫码打开当前页