WordPress子比主题zibll文章卡片列表及代码编辑器添加三圆点

演示效果

代码教程

将下面代码添加在 后台子比设置==》全局功能==》自定义代码==》自定义CSS样式

文章列表卡片代码

/* 文章列表卡片3个小圆圈样式美化 */  
     .posts-item.card {
       padding: 35px 10px 10px 10px!important;
      }
       .posts-item {
       position: relative !important;
      }
       .posts-item.card::before {
       content: "";
       display: block;
       background: #fc625d;
       top: 13px;
       left: 15px;
       border-radius: 50%;
       width: 9px;
       height: 9px;
       box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
       margin: 0px 2px -7px;
       z-index: 1;
       position: absolute;
      }
 /* 文章列表卡片3个小圆圈样式美化 */

代码区块添加圆点美化代码

/*编辑器+圆点美化*/
.enlighter::before {
    content: "";
    display: block;
    background: #fc625d;
    top: 9px;
    left: 15px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    margin: 0px 2px -7px;
    z-index: 1;
    position: absolute;
}
.enlighter-overflow-scroll.enlighter-v-standard .enlighter {
    padding: 35px 0 12px 0;
}
/*编辑器+圆点美化*/