自定义数字列表

节点样式 菜包 4个月前 (05-21) 2个评论 扫描二维码

新增4种彩色有序列表,另外在V1主题里适配了菜单里的节点样式图标


注意:本段内容须“登录”后方可查看!


下面的18版本会内置,不用更新了

效果演示

样式代码

数字列表 ➀

注意:本段内容须“登录”后方可查看!


数字列表 ②
.node[mystyle='数字列表②'] {
    counter-reset: count 0;
    
    > .node-child > .node {
        
        counter-increment: count 1;
        
        > .node-btn {
            &::before {
                background-color: transparent !important;
                content: counter(count)!important;
                border: 1px solid var(--bgrey) !important;
                width: 100% !important;
                border-radius: 100px !important;
                height: 100% !important;
                transform: scale(0.7);
                font-size: 16px !important;
            }

            &:hover::before {
                transform: scale(0.9) !important;
            }
        }
    } 
}body#jShape.theme-night .node[mystyle='数字列表②']>.node-child>.node>.node-btn::before {
border: 1px solid #cfc1c1 !important;   
} 

数字列表 ③

注意:本段内容须“登录”后方可查看!

喜欢 (2)
[觉得文章不错,请站长喝咖啡]
分享 (0)

您必须 登录 才能发表评论!

(2)个小伙伴在吐槽
  1. 菜包大大,请问这些代码怎么用?放css里面还是js里面?
    miaonotu2021-05-05 15:56 Mac OS X | Chrome 89.0.4389.72
    • 菜包
      这个是放在节点自定义样式里,我这几天制作一个教程吧
      菜包2021-05-05 20:05 Mac OS X | Chrome 78.0.3904.108