refactor: 优化目录树高亮显示样式的实现方式

src/app.css

@@ -1401,11 +1401,14 @@ footer section p:first-child {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	display: block;
-	width: 100%;
+	width: calc(100% + 1rem);
+	margin-left: -1rem;
+	padding-left: 1rem;
 	position: relative;
 	color: #b0b0b0; /* VOID style dark text */
-	transition: color 0.2s;
+	transition: color 0.2s, background-color 0.2s;
 	text-decoration: none;
+	box-sizing: border-box;
 }
 
 .TOC li a:hover,
@@ -1416,35 +1419,16 @@ footer section p:first-child {
 
 .TOC li a.is-active-link {
 	font-weight: 700;
-}
-
-.TOC .is-active-link::before {
-	content: '';
 	background-color: rgba(0, 0, 0, 0.3); /* VOID style dark highlight */
-	display: block;
-	height: 2.1rem;
-	left: -1rem;
-	top: 0;
-	position: absolute;
-	width: calc(100% + 1rem);
 	border-left: 2px solid #419b38;
-	z-index: -1;
+	padding-left: calc(1rem - 2px); /* adjust padding for the border */
-	box-sizing: border-box;
 }
 
 @media screen and (min-width: 1199.5px) {
-	.TOC .toc-link:hover::before {
+	.TOC li a:hover {
-		content: '';
 		background-color: rgba(0, 0, 0, 0.3);
-		display: block;
-		height: 2.1rem;
-		left: -1rem;
-		top: 0;
-		position: absolute;
-		width: calc(100% + 1rem);
 		border-left: 2px solid #419b38;
-		z-index: -1;
+		padding-left: calc(1rem - 2px);
-		box-sizing: border-box;
 	}
 }