diff --git a/src/editor/index.css b/src/editor/index.css
index 6c2df886..3a3213df 100644
--- a/src/editor/index.css
+++ b/src/editor/index.css
@@ -6,7 +6,7 @@
     transform: scale(1.2);
   } /* ignored */
   to {
-    transform: scale(1); 
+    transform: scale(1);
   }
 }
 
@@ -288,6 +288,7 @@ li p .ag-hide:first-child {
 p:not(.ag-active)[data-role="hr"] {
   position: relative;
   color: transparent;
+  padding: 0.8em 0;
 }
 
 p:not(.ag-active)[data-role="hr"]::before {
@@ -296,7 +297,8 @@ p:not(.ag-active)[data-role="hr"]::before {
   height: 5px;
   background: gainsboro;
   position: absolute;
-  bottom: -2px;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 p:not(.ag-active)[data-role="hr"] * {
@@ -456,4 +458,3 @@ span[data-role="link"], a[data-role="link"], span[data-role="link"] .ag-backlash
 .ag-focus-mode pre.ag-active {
   opacity: 1;
 }
-
diff --git a/static/themes/dark.css b/static/themes/dark.css
index bda17173..4a0a08e5 100755
--- a/static/themes/dark.css
+++ b/static/themes/dark.css
@@ -370,6 +370,10 @@ code {
   margin-top: 0;
 }
 
+p:not(.ag-active)[data-role="hr"]::before {
+  background: #545454;
+}
+
 .fg-color-dark {
   color: #c6c6c6;
 }
diff --git a/static/themes/light.css b/static/themes/light.css
index 2a23bc19..c9d35fc1 100644
--- a/static/themes/light.css
+++ b/static/themes/light.css
@@ -351,6 +351,10 @@ code {
   background: #F2F6FC;
 }
 
+p:not(.ag-active)[data-role="hr"]::before {
+  background: gainsboro;
+}
+
 .fg-color-dark {
   color: #303133;
 }