From 617feaa04e32472f8ea768e692a9493903c71d38 Mon Sep 17 00:00:00 2001
From: jameschiang <james930228@gmail.com>
Date: Wed, 18 Dec 2024 19:08:07 +0800
Subject: [PATCH] fix: unexpected shift of the entire article when anchor
 hidden = false

When a heading occupies an entire line, moving the mouse over the heading causes the entire article to unexpectedly shift down by one line.
---
 assets/css/common/post-single.css | 43 ++++++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
index 486ad36e..be702091 100644
--- a/assets/css/common/post-single.css
+++ b/assets/css/common/post-single.css
@@ -69,11 +69,15 @@
     font-size: 12px;
 }
 
-.post-content a,
-.toc a:hover {
-    box-shadow: 0 1px 0;
-    box-decoration-break: clone;
-    -webkit-box-decoration-break: clone;
+
+.post-content h1,
+.post-content h2,
+.post-content h3,
+.post-content h4,
+.post-content h5,
+.post-content h6 {
+    position: relative;
+    display: inline-block;
 }
 
 .post-content a code {
@@ -356,11 +360,38 @@ h3:hover .anchor,
 h4:hover .anchor,
 h5:hover .anchor,
 h6:hover .anchor {
+    position: absolute;
     display: inline-flex;
     color: var(--secondary);
     margin-inline-start: 8px;
     font-weight: 500;
     user-select: none;
+    padding-left: 30px;
+    margin-left: -25px;
+}
+
+h1:hover .anchor::after,
+h2:hover .anchor::after,
+h3:hover .anchor::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 25px;
+    width: 50%;
+    height: 1px;
+    background-color: var(--secondary);
+}
+
+h4:hover .anchor::after,
+h5:hover .anchor::after,
+h6:hover .anchor::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 29px;
+    width: 25%;
+    height: 1px;
+    background-color: var(--secondary);
 }
 
 .paginav {
@@ -406,4 +437,4 @@ h1>a>svg {
 img.in-text {
     display: inline;
     margin: auto;
-}
+}
\ No newline at end of file