diff --git a/assets/css/_core/_root.scss b/assets/css/_core/_root.scss
index bc6778d7..e6955c9f 100644
--- a/assets/css/_core/_root.scss
+++ b/assets/css/_core/_root.scss
@@ -14,4 +14,14 @@
 
   // Set breadcrumb height to 0px if breadcrumb is disabled
   --#{$prefix}breadcrumb-height: 0px;
+
+  // hr style
+  --#{$prefix}hr-background-color: #{darken($global-border-color, 5%)};
+  --#{$prefix}hr-before-color: #{lighten($single-link-hover-color, 4%)};
+}
+
+// Dark theme
+[data-theme=dark] {
+  --#{$prefix}hr-background-color: #{lighten($global-border-color-dark, 5%)};
+  --#{$prefix}hr-before-color: #{darken($global-link-hover-color-dark, 4%)};
 }
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
index c73556df..c6511b0c 100644
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -94,6 +94,42 @@
     padding: 5px;
   }
 
+  hr {
+    position: relative;
+    height: 1em;
+    background: linear-gradient(to right, var(--#{$prefix}hr-background-color) 50%, transparent 50%);
+    background-size: 10px 2px;
+    background-position: center;
+    background-repeat: repeat-x;
+    border: none;
+
+    &.awesome-hr {
+      margin-block: 0.5em;
+
+      &::before {
+        display: inline-block;
+        font-weight: 600;
+        font-family: 'Font Awesome 6 Free';
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        position: absolute;
+        left: 5%;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+        color: var(--#{$prefix}hr-before-color);
+        content: '\f0c4';
+        font-size: 20px;
+        line-height: 1;
+        transition: left 1s ease-in-out, color 0.3s ease, border-color 0.3s ease;
+      }
+    
+      &:hover::before {
+        left: calc(95% - 20px);
+      }
+    }
+  }
+
   .content {
     > h1,
     > h2 {
@@ -404,17 +440,15 @@
       }
     }
 
-    @import '../_partials/_single/code';
-    @import '../_shortcodes';
-
     hr {
-      margin-block: 1em;
-      position: relative;
-      border-top: 1px dashed darken($global-border-color, 5%);
-      border-bottom: none;
+      margin-block: 0;
+    }
 
-      [data-theme='dark'] & {
-        border-top: 1px dashed lighten($global-border-color-dark, 5%);
+    .footnotes {
+      hr {
+        background-color: var(--#{$prefix}hr-background-color);
+        height: 1px;
+        margin-block: 1em;
       }
     }
 
@@ -436,6 +470,9 @@
         @include box-shadow(inset 0 -1px 0 $global-border-color-dark);
       }
     }
+
+    @import '../_partials/_single/code';
+    @import '../_shortcodes';
   }
 
   @import '../_partials/_single/reward';
diff --git a/layouts/partials/single/related.html b/layouts/partials/single/related.html
index 9b6d704c..bb72ca8b 100644
--- a/layouts/partials/single/related.html
+++ b/layouts/partials/single/related.html
@@ -11,6 +11,7 @@
   {{- end -}}
   {{- $related := $posts.Related . | first ($params.related.count | default 5) -}}
   {{- with $related -}}
+    <hr class="awesome-hr" />
     <h2 id="see-also">{{ T "single.relatedContent" }}</h2>
     <ul>
       {{- range $i, $p := . -}}