diff --git a/app/src/assets/scss/component/_typography.scss b/app/src/assets/scss/component/_typography.scss
index 4034b4448..32475858c 100644
--- a/app/src/assets/scss/component/_typography.scss
+++ b/app/src/assets/scss/component/_typography.scss
@@ -119,13 +119,14 @@
 
   blockquote,
   .bq {
-    padding: 4px;
+    padding-left: calc(0.25em + 4px);
     color: var(--b3-theme-on-surface);
-    border-left: .25em solid var(--b3-theme-surface-lighter);
+    box-shadow: .25em 0 0 0 var(--b3-theme-surface-lighter) inset;
     background-color: var(--b3-bq-background);
-    margin: 4px 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    display: flex;
+    flex-direction: column;
   }
 
   .h1,
diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
index a8368d58a..4fdf3b6cb 100644
--- a/app/src/assets/scss/protyle/_wysiwyg.scss
+++ b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -55,16 +55,6 @@
       }
     }
 
-    &.bq {
-      &.protyle-wysiwyg--select,
-      &.protyle-wysiwyg--hl {
-        &::after {
-          left: -0.25em;
-          width: calc(100% + 0.25em);
-        }
-      }
-    }
-
     .bq {
       .dragover {
         &__top:not(.av__row) {
@@ -94,6 +84,8 @@
     &.li {
       padding: 0;
       margin: 0;
+      display: flex;
+      flex-direction: column;
 
       &:before {
         content: "";
@@ -183,14 +175,6 @@
         padding-left: 16px;
         padding-top: 0;
         padding-bottom: 0;
-
-        &.protyle-wysiwyg--select,
-        &.protyle-wysiwyg--hl {
-          &::after {
-            left: 16px;
-            width: calc(100% - 16px);
-          }
-        }
       }
     }