:recycle: https://github.com/siyuan-note/siyuan/pull/13281

app/appearance/themes/daylight/theme.css

@@ -200,7 +200,7 @@
 }
 
 /* https://github.com/siyuan-note/siyuan/issues/6440 */
-.protyle-action--order:after {
+.protyle-action--order::after {
     mix-blend-mode: multiply;
 }
 

app/appearance/themes/midnight/theme.css

@@ -199,7 +199,7 @@
 }
 
 /* https://github.com/siyuan-note/siyuan/issues/6440 */
-.protyle-action--order:after {
+.protyle-action--order::after {
     mix-blend-mode: screen;
 }
 

app/src/assets/scss/base.scss

@@ -329,8 +329,8 @@ html {
     opacity: .38;
   }
 
-  .dragover__top:after,
-  .dragover__bottom:after {
+  .dragover__top::after,
+  .dragover__bottom::after {
     content: "";
     width: var(--file-toggle-width);
     height: 4px;
@@ -341,7 +341,7 @@ html {
     z-index: 1;
   }
 
-  .dragover__top:after {
+  .dragover__top::after {
     top: -3px;
     bottom: auto;
   }

app/src/assets/scss/business/_av.scss

@@ -29,7 +29,7 @@
     background: var(--b3-border-color);
     border-radius: var(--b3-border-radius);
 
-    &:after {
+    &::after {
       content: " ";
       border-radius: var(--b3-border-radius);
       position: absolute;

app/src/assets/scss/business/_export.scss

@@ -7,7 +7,7 @@
     position: relative;
     z-index: 1;
 
-    [data-node-id].li[fold="1"] > .protyle-action:after {
+    [data-node-id].li[fold="1"] > .protyle-action::after {
       background-color: transparent;
       border: 1px solid var(--b3-list-hover);
       box-sizing: border-box;

app/src/assets/scss/business/_layout.scss

@@ -2,7 +2,7 @@
   overflow-y: hidden; // https://github.com/siyuan-note/siyuan/issues/6706
 
   &__wnd--active .layout-tab-bar .item--focus {
-    &:after {
+    &::after {
       background-color: var(--b3-theme-primary);
     }
 
@@ -111,11 +111,11 @@
     position: relative;
     z-index: 4; // 需大于 #sidebarContainer https://github.com/siyuan-note/siyuan/issues/11759
 
-    &:hover:after {
+    &:hover::after {
       background-color: var(--b3-scroll-color);
     }
 
-    &:after {
+    &::after {
       content: "";
       width: 100%;
       height: .5px;
@@ -133,7 +133,7 @@
       margin: 0 -6px 0 0;
       height: auto;
 
-      &:after {
+      &::after {
         top: 0;
         width: .5px;
         left: 0;
@@ -226,7 +226,7 @@
           max-width: none;
           flex: 1;
 
-          &.item--focus:after {
+          &.item--focus::after {
             background-color: var(--b3-theme-primary);
           }
         }
@@ -268,7 +268,7 @@
           }
         }
 
-        &--focus:after {
+        &--focus::after {
           content: "";
           width: 100%;
           height: 3px;
@@ -384,12 +384,12 @@
     padding: 0;
 
     .dock__item {
-      &[data-index="0"]:after {
+      &[data-index="0"]::after {
         top: -32px;
         bottom: auto;
       }
 
-      &[data-index="1"]:after {
+      &[data-index="1"]::after {
         bottom: 100%;
       }
     }

app/src/assets/scss/business/_search.scss

@@ -24,7 +24,7 @@
         margin: 0 -6px 0 0;
         height: auto;
 
-        &:after {
+        &::after {
           width: .5px;
           height: 100%;
         }
@@ -104,7 +104,7 @@
     position: relative;
     z-index: 2;
 
-    &:after {
+    &::after {
       content: "";
       display: block;
       background-color: var(--b3-theme-surface-lighter);
@@ -116,7 +116,7 @@
       height: .5px;
     }
 
-    &:hover:after {
+    &:hover::after {
       background-color: var(--b3-scroll-color);
     }
   }

app/src/assets/scss/component/_list.scss

@@ -27,7 +27,7 @@
       position: relative;
     }
 
-    .b3-list__panel:before {
+    .b3-list__panel::before {
       content: "";
       height: 100%;
       top: 0;

app/src/assets/scss/component/_snackbar.scss

@@ -41,7 +41,7 @@
   &--error .b3-snackbar__content {
     padding-left: 47px;
 
-    &:after {
+    &::after {
       content: "❗";
       position: absolute;
       left: 16px;

app/src/assets/scss/component/_switch.scss

@@ -24,7 +24,7 @@
     align-self: center;
   }
 
-  &:after {
+  &::after {
     width: 8px;
     height: 8px;
     border-radius: 50%;
@@ -40,7 +40,7 @@
     transition: left 80ms linear, background-color 80ms linear, width 80ms linear, height 80ms linear;
   }
 
-  &:before {
+  &::before {
     z-index: 2;
     content: "";
     left: 7px;
@@ -59,28 +59,28 @@
     background-color: var(--b3-switch-checked-background);
     border-color: transparent;
 
-    &:after {
+    &::after {
       background-color: var(--b3-switch-checked);
       height: 12px;
       width: 12px;
     }
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       left: 17px;
     }
 
     &:hover:not(:disabled) {
-      &:after {
+      &::after {
         background-color: var(--b3-switch-checked-hover);
       }
 
-      &:before {
+      &::before {
         background-color: var(--b3-switch-checked-hover2);
       }
     }
 
-    &:active:not(:disabled):after {
+    &:active:not(:disabled)::after {
       height: 14px;
       width: 14px;
     }
@@ -91,12 +91,12 @@
     cursor: auto;
   }
 
-  &:active:not(:disabled):after {
+  &:active:not(:disabled)::after {
     height: 10px;
     width: 10px;
   }
 
-  &:hover:not(:disabled):before {
+  &:hover:not(:disabled)::before {
     display: inline-block;
   }
 }

app/src/assets/scss/component/_tooltips.scss

@@ -197,8 +197,8 @@
 }
 
 @media screen and (max-width: 520px) {
-  .b3-tooltips:before,
-  .b3-tooltips:after {
+  .b3-tooltips::before,
+  .b3-tooltips::after {
     content: none;
   }
 }

app/src/assets/scss/component/_typography.scss

@@ -123,7 +123,7 @@
 
   blockquote,
   .bq {
-    &:before {
+    &::before {
       content: '';
       background-color: var(--b3-theme-surface-lighter);
       width: .25em;
@@ -345,7 +345,7 @@
       display: flex;
       align-items: baseline; // https://ld246.com/article/1645933216334
 
-      &:before {
+      &::before {
         content: "";
         flex: 1;
       }

app/src/assets/scss/pdf/_pdf.scss

@@ -234,7 +234,7 @@
   cursor: ew-resize;
   right: -6px;
 
-  &:after {
+  &::after {
     content: "";
     width: 1px;
     height: 100%;
@@ -244,7 +244,7 @@
     left: 3px;
   }
 
-  &:hover:after {
+  &:hover::after {
     background-color: var(--b3-scroll-color);
   }
 }

app/src/assets/scss/protyle/_protyle.scss

@@ -390,7 +390,7 @@
     padding: 0 4px 0 2px;
     white-space: break-spaces;
 
-    &:empty:after {
+    &:empty::after {
       content: attr(data-tip);
       color: var(--b3-theme-on-surface-light);
       cursor: text;
@@ -420,11 +420,11 @@ table[contenteditable="true"] + .protyle-action__table {
     cursor: col-resize;
     z-index: 2;
 
-    &:hover:after {
+    &:hover::after {
       background-color: var(--b3-theme-primary-light);
     }
 
-    &:after {
+    &::after {
       top: 0;
       width: 2px;
       left: 2px;

app/src/assets/scss/protyle/_wysiwyg.scss

@@ -5,7 +5,7 @@
   user-select: auto;
   overflow-x: clip;
 
-  &--empty:empty:before {
+  &--empty:empty::before {
     color: var(--b3-empty-color);
     content: attr(placeholder);
   }
@@ -43,7 +43,7 @@
         position: relative;
         height: 26px;
 
-        &:after {
+        &::after {
           position: absolute;
           content: " ";
           height: 1px;
@@ -86,14 +86,14 @@
       display: flex;
       flex-direction: column;
 
-      &:before {
+      &::before {
         content: "";
         position: absolute;
         border-left: .5px solid var(--b3-theme-background-light);
         left: 17px;
       }
 
-      &:hover:before {
+      &:hover::before {
         border-left-color: var(--b3-scroll-color);
       }
 
@@ -111,11 +111,11 @@
       }
 
       &[fold="1"] {
-        &:before {
+        &::before {
           content: none;
         }
 
-        & > .protyle-action:after {
+        & > .protyle-action::after {
           background-color: var(--b3-list-hover);
         }
 
@@ -147,7 +147,7 @@
           padding-bottom: 0;
         }
 
-        &:after {
+        &::after {
           content: "";
           position: absolute;
           border-radius: 50%;
@@ -163,7 +163,7 @@
           position: relative;
         }
 
-        &--order:after {
+        &--order::after {
           border-radius: var(--b3-border-radius);
         }
       }
@@ -334,7 +334,7 @@
         filter: brightness(.68);
       }
 
-      &--drag > span:after {
+      &--drag > span::after {
         content: "";
         position: absolute;
         top: 0;
@@ -363,8 +363,8 @@
           box-shadow: 0 0 1px 1px var(--b3-theme-on-background);
         }
 
-        &:before,
-        &:after {
+        &::before,
+        &::after {
           position: absolute;
           width: 4px;
           content: "";
@@ -372,7 +372,7 @@
           left: -4px;
         }
 
-        &:after {
+        &::after {
           left: 4px;
           width: 8px
         }
@@ -409,7 +409,7 @@
       }
 
       &--drag {
-        .iframe-content:after {
+        .iframe-content::after {
           content: "";
           position: absolute;
           top: 0;
@@ -433,7 +433,7 @@
         box-shadow: 0 0 1px 1px var(--b3-theme-on-surface);
         box-sizing: border-box;
 
-        &:after {
+        &::after {
           content: "";
           background-color: var(--b3-theme-surface);
           width: 32px;
@@ -449,7 +449,7 @@
         }
 
         &:hover,
-        &:hover:after {
+        &:hover::after {
           background-color: var(--b3-theme-background);
           box-shadow: 0 0 1px 1px var(--b3-theme-on-background);
         }
@@ -459,17 +459,10 @@
 
   &--select,
   &--hl {
-    &:after {
-      background-color: var(--b3-theme-primary-lightest);
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      content: " ";
-      left: 0;
-      top: 0;
+    @extend .dragover;
+
+    &::after {
       border-radius: var(--b3-border-radius);
-      z-index: 3;
-      pointer-events: none;
     }
   }
 
@@ -515,7 +508,7 @@
     min-height: 26px !important;
   }
 
-  div[fold="1"][data-type="NodeHeading"]:before {
+  div[fold="1"][data-type="NodeHeading"]::before {
     content: "";
     height: 16px !important;
     width: 16px;
@@ -600,7 +593,7 @@
     cursor: pointer;
 
     &:hover {
-      &:after {
+      &::after {
         background-color: var(--b3-theme-background-light);
       }
 

app/src/protyle/ui/initUI.ts

@@ -184,7 +184,7 @@ export const setPadding = (protyle: IProtyle) => {
     if (window.siyuan.config.editor.displayBookmarkIcon) {
         const editorAttrElement = document.getElementById("editorAttr");
         if (editorAttrElement) {
-            editorAttrElement.innerHTML = `.protyle-wysiwyg--attr .b3-tooltips:after { max-width: ${protyle.wysiwyg.element.clientWidth - left - right}px; }`;
+            editorAttrElement.innerHTML = `.protyle-wysiwyg--attr .b3-tooltips::after { max-width: ${protyle.wysiwyg.element.clientWidth - left - right}px; }`;
         }
     }
     const oldWidth = protyle.wysiwyg.element.getAttribute("data-realwidth");

app/src/util/assets.ts

@@ -205,9 +205,9 @@ export const setInlineStyle = (set = true) => {
 .b3-typography code:not(.hljs), .protyle-wysiwyg span[data-type~=code] { font-variant-ligatures: ${window.siyuan.config.editor.codeLigatures ? "normal" : "none"} }
 .li > .protyle-action {height:${height + 8}px;line-height: ${height + 8}px}
 .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h1, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h2, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h3, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h4, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h5, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h6 {line-height:${height + 8}px;}
-.protyle-wysiwyg [data-node-id].li > .protyle-action:after {height: ${window.siyuan.config.editor.fontSize}px;width: ${window.siyuan.config.editor.fontSize}px;margin:-${window.siyuan.config.editor.fontSize / 2}px 0 0 -${window.siyuan.config.editor.fontSize / 2}px}
+.protyle-wysiwyg [data-node-id].li > .protyle-action::after {height: ${window.siyuan.config.editor.fontSize}px;width: ${window.siyuan.config.editor.fontSize}px;margin:-${window.siyuan.config.editor.fontSize / 2}px 0 0 -${window.siyuan.config.editor.fontSize / 2}px}
 .protyle-wysiwyg [data-node-id].li > .protyle-action svg {height: ${Math.max(14, window.siyuan.config.editor.fontSize - 8)}px}
-.protyle-wysiwyg [data-node-id].li:before {height: calc(100% - ${height + 8}px);top:${(height + 8)}px}
+.protyle-wysiwyg [data-node-id].li::before {height: calc(100% - ${height + 8}px);top:${(height + 8)}px}
 .protyle-wysiwyg [data-node-id] [spellcheck] {min-height:${height}px;}
 .protyle-wysiwyg .p,
 .protyle-wysiwyg .code-block .hljs,