后退
榜单
热门 B2美化

【子比兔出品】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

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

    大佬出手,必属精品!

    UID.0338
  2. fankeji

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

    UID.0419
  3. 凌浩

    感谢作者精妙绝伦的文章!

    UID.0475
  4. 小陈

    大佬出手,必属精品!

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