求一个折叠样式的代码片段（变态版）

还是想挣扎一下：

因此，暂时无法简单的支持，只能用其他样式或标记代替这个箭头按钮来标记折叠状态。

对折叠的列表，能实现鼠标悬浮时，“‣”变为红色吗？

修改后的代码，不知是否你想要的结果

/* 有序列表，折叠时，去除数字方框阴影; 无序列表的折叠阴影不用去除 */
.protyle-wysiwyg [data-node-id].li[data-subtype="o"][fold="1"]>.protyle-action:after{
    background-color: transparent;
}

/* 只显示“‣” */
.protyle-gutters:not(:has(svg[style*="transform:rotate(90deg)"])) button[data-type="NodeList"] svg,
.protyle-gutters:not(:has(svg[style*="transform:rotate(90deg)"])) button[data-type="NodeListItem"] svg,
.protyle-gutters:not(:has(svg[style*="transform:rotate(90deg)"])) button[data-type="NodeHeading"] svg
{
    display:none;
}
/* 鼠标悬浮“‣”时去除方框引用 */
.protyle-gutters button:hover svg{
    background-color: transparent;
}
/* 折叠标题，去除方框（任我行主题，可以理解为“去除折叠状态标识”） */
.protyle-wysiwyg div[fold="1"]:not(div[data-type="NodeListItem"]){
    background-color: transparent;
    border:none;
}
/* 去掉标题折叠按钮背景 */
.protyle-wysiwyg div[fold="1"][data-type=NodeHeading]:before {
    background:none;
}
​

2. 折叠状态下，需要常驻显示“‣”

这个常驻不了，因为左侧图标是公用的，即随着鼠标切换到不同的块，这个里的内容会被替换掉，并且这个图标根据鼠标位置实时移动，因此无法针对每个块常驻这里的图标。

如果想实现，必须抛弃现有的实现逻辑，用 before 或插入图标元素等重新设计，这个修改的代价可能太过高昂，且可能存在一些列兼容问题，甚至影响现有插件或现有功能，因此，暂时无法简单的支持，只能用其他样式或标记代替这个箭头按钮来标记折叠状态。

另：折叠状态下，上面的片段似乎会覆盖以下片段

我不知道你说的覆盖是指什么，我这里并没有出现覆盖情况，如果你指折叠时省略号被隐藏的话，这和这段代码无关，你不用这段代码，折叠时省略号也会隐藏（因为省略号超出折叠元素的范围）。

抱歉，之前的回复有问题，并不是因为省略号超出折叠元素范围导致的，而是因为折叠时标题前面的圆形图标和省略号是选择符是同一个元素，且圆形图标的优先级更高，覆盖了省略号导致的。

所以，我现在在折叠模式下，用标题后面的文字元素再添加个样式来模拟标题元素的省略号，这样就弥补了折叠时标题省略号丢失问题。

代码如下，添加到思源 css 代码片段中即可。

.protyle-wysiwyg [data-node-id][data-type="NodeHeading"][fold="1"] > [contenteditable="true"]::before {
    position: absolute;
    top: -0.8em;
    color: #55555a4d;
}

.protyle-wysiwyg [data-node-id][fold="1"].h1 > [contenteditable="true"]::before {
    content: ".";
}

.protyle-wysiwyg [data-node-id][fold="1"].h2 > [contenteditable="true"]::before {
    content: "..";
}

.protyle-wysiwyg [data-node-id][fold="1"].h3 > [contenteditable="true"]::before {
    content: "...";
}

.protyle-wysiwyg [data-node-id][fold="1"].h4 > [contenteditable="true"]::before {
    content: "....";
}

.protyle-wysiwyg [data-node-id][fold="1"].h5 > [contenteditable="true"]::before {
    content: ".....";
}

.protyle-wysiwyg [data-node-id][fold="1"].h6 > [contenteditable="true"]::before {
    content: "......";
}
​

大佬，还有点小问题：

1.我想只在折叠状态下隐藏“‣”后面的标识（上面的代码在非折叠的状态下也把后面的标识隐藏了）

2.折叠状态下，需要常驻显示“‣”（上面的代码只有鼠标悬浮时才显示“‣”，没法辨别折叠状态）

PS：其实需求就是把列表折叠样式（即方框阴影）改为箭头“‣”

3.标题样式

之前表述没完全，标题折叠也只需显示“‣”

另：折叠状态下，上面的片段似乎会覆盖以下片段，大佬看看能解决不：

/* 设置统一的样式 */
.protyle-wysiwyg [data-node-id][data-type="NodeHeading"]::before {
    position: absolute;
    top: -0.8em;
    color: #55555a4d;
}

.protyle-wysiwyg [data-node-id].h1::before {
    content: ".";
}

.protyle-wysiwyg [data-node-id].h2::before {
    content: "..";
}

.protyle-wysiwyg [data-node-id].h3::before {
    content: "...";
}

.protyle-wysiwyg [data-node-id].h4::before {
    content: "....";
}

.protyle-wysiwyg [data-node-id].h5::before {
    content: ".....";
}

.protyle-wysiwyg [data-node-id].h6::before {
    content: "......";
}



​