diff --git a/docs/.vuepress/components/VPNavbarDropdown.vue b/docs/.vuepress/components/VPNavbarDropdown.vue
index b46a7bc4af..448b9e95ae 100644
--- a/docs/.vuepress/components/VPNavbarDropdown.vue
+++ b/docs/.vuepress/components/VPNavbarDropdown.vue
@@ -255,13 +255,13 @@ watch(
   color: inherit;
   line-height: 1.7rem;
 
-  a {
+  .auto-link {
     position: relative;
 
     display: block;
 
     margin-bottom: 0;
-    padding: 0 1.5rem 0 1.25rem;
+    padding: 0 1.25rem;
     border-bottom: none;
 
     font-weight: 400;
@@ -271,7 +271,7 @@ watch(
       color: var(--vp-c-accent);
     }
 
-    &.route-link-active {
+    &.auto-link-active {
       color: var(--vp-c-accent);
 
       &::after {
@@ -322,10 +322,10 @@ watch(
     padding: 0 1.5rem 0 1.25rem;
   }
 
-  > a {
+  > .auto-link {
     font-weight: inherit;
 
-    &.route-link-active {
+    &.auto-link-active {
       &::after {
         display: none;
       }
diff --git a/docs/.vuepress/components/VPSidebarItem.vue b/docs/.vuepress/components/VPSidebarItem.vue
index c49564fdcc..332372538e 100644
--- a/docs/.vuepress/components/VPSidebarItem.vue
+++ b/docs/.vuepress/components/VPSidebarItem.vue
@@ -165,16 +165,17 @@ onBeforeUnmount(() => {
     font-weight: 600;
   }
 
-  .vp-icon {
-    margin-inline-end: 0.25em;
+  .auto-link {
+    display: block;
   }
-}
 
-a.vp-sidebar-item {
-  cursor: pointer;
+  &.auto-link {
+    display: block;
+    cursor: pointer;
 
-  &:hover {
-    color: var(--vp-c-accent);
+    &:hover {
+      color: var(--vp-c-accent);
+    }
   }
 }
 </style>
diff --git a/e2e/docs/.vuepress/components/ArticleList.vue b/e2e/docs/.vuepress/components/ArticleList.vue
index b192058227..54e3b55c05 100644
--- a/e2e/docs/.vuepress/components/ArticleList.vue
+++ b/e2e/docs/.vuepress/components/ArticleList.vue
@@ -119,15 +119,9 @@ defineProps<{
       transform: scaleX(0);
     }
 
-    &:hover {
-      &::after {
-        visibility: visible;
-        transform: scaleX(1);
-      }
-    }
-
-    a {
-      color: inherit;
+    &:hover::after {
+      visibility: visible;
+      transform: scaleX(1);
     }
   }
 
diff --git a/e2e/docs/.vuepress/layouts/Category.vue b/e2e/docs/.vuepress/layouts/Category.vue
index b30784db2f..3d27beb931 100644
--- a/e2e/docs/.vuepress/layouts/Category.vue
+++ b/e2e/docs/.vuepress/layouts/Category.vue
@@ -47,7 +47,7 @@ const categoryMap = useBlogCategory<ArticleInfo>('category')
     font-size: 14px;
   }
 
-  a {
+  .route-link {
     color: inherit;
   }
 
diff --git a/e2e/docs/.vuepress/layouts/Tag.vue b/e2e/docs/.vuepress/layouts/Tag.vue
index b3a4e2de37..cf9d4332a3 100644
--- a/e2e/docs/.vuepress/layouts/Tag.vue
+++ b/e2e/docs/.vuepress/layouts/Tag.vue
@@ -47,7 +47,7 @@ const tagMap = useBlogCategory<ArticleInfo>('tag')
     font-size: 14px;
   }
 
-  a {
+  .route-link {
     color: inherit;
   }
 
diff --git a/themes/theme-default/src/client/components/VPNavbarDropdown.vue b/themes/theme-default/src/client/components/VPNavbarDropdown.vue
index c6a8f49d97..338aba978a 100644
--- a/themes/theme-default/src/client/components/VPNavbarDropdown.vue
+++ b/themes/theme-default/src/client/components/VPNavbarDropdown.vue
@@ -241,13 +241,13 @@ watch(
   color: inherit;
   line-height: 1.7rem;
 
-  a {
+  .auto-link {
     position: relative;
 
     display: block;
 
     margin-bottom: 0;
-    padding: 0 1.5rem 0 1.25rem;
+    padding: 0 1.25rem;
     border-bottom: none;
 
     font-weight: 400;
@@ -257,7 +257,7 @@ watch(
       color: var(--vp-c-accent);
     }
 
-    &.route-link-active {
+    &.auto-link-active {
       color: var(--vp-c-accent);
 
       &::after {
@@ -308,10 +308,10 @@ watch(
     padding: 0 1.5rem 0 1.25rem;
   }
 
-  > a {
+  > .auto-link {
     font-weight: inherit;
 
-    &.route-link-active {
+    &.auto-link-active {
       &::after {
         display: none;
       }
diff --git a/themes/theme-default/src/client/components/VPNavbarItems.vue b/themes/theme-default/src/client/components/VPNavbarItems.vue
index 9f3ec34a34..dba321e120 100644
--- a/themes/theme-default/src/client/components/VPNavbarItems.vue
+++ b/themes/theme-default/src/client/components/VPNavbarItems.vue
@@ -62,13 +62,12 @@ useUpdateDeviceStatus(
     display: none;
   }
 
-  a {
-    display: inline-block;
+  .auto-link {
     color: inherit;
     line-height: 1.4rem;
 
     &:hover,
-    &.route-link-active {
+    &.auto-link-active {
       color: var(--vp-c-text);
     }
   }
@@ -88,16 +87,18 @@ useUpdateDeviceStatus(
     margin-left: 0;
   }
 
-  a {
+  .auto-link {
     &:hover,
-    &.route-link-active {
+    &.auto-link-active {
       color: var(--vp-c-accent);
     }
   }
 
-  > a {
+  > .auto-link {
+    display: inline-block;
+
     &:hover,
-    &.route-link-active {
+    &.auto-link-active {
       margin-bottom: -2px;
       border-bottom: 2px solid var(--vp-c-accent);
 
diff --git a/themes/theme-default/src/client/components/VPPageNav.vue b/themes/theme-default/src/client/components/VPPageNav.vue
index 11ff54fb9a..42c1e7c507 100644
--- a/themes/theme-default/src/client/components/VPPageNav.vue
+++ b/themes/theme-default/src/client/components/VPPageNav.vue
@@ -87,7 +87,7 @@ useEventListener('keydown', (event): void => {
     display: none;
   }
 
-  .route-link {
+  .auto-link {
     display: inline-block;
     flex-grow: 1;
 
diff --git a/themes/theme-default/src/client/components/VPSidebar.vue b/themes/theme-default/src/client/components/VPSidebar.vue
index 9bd3705a5c..2a598b8081 100644
--- a/themes/theme-default/src/client/components/VPSidebar.vue
+++ b/themes/theme-default/src/client/components/VPSidebar.vue
@@ -86,7 +86,7 @@ defineSlots<{
     @media (max-width: $MQMobile) {
       display: block;
 
-      .vp-navbar-dropdown-item a.route-link-active::after {
+      .vp-navbar-dropdown-item .route-link-active::after {
         top: calc(1rem - 2px);
       }
     }
@@ -97,7 +97,7 @@ defineSlots<{
       list-style-type: none;
     }
 
-    a {
+    .auto-link {
       font-weight: 600;
     }
   }
diff --git a/themes/theme-default/src/client/components/VPSidebarItem.vue b/themes/theme-default/src/client/components/VPSidebarItem.vue
index efc8e0d9e0..be5be82fea 100644
--- a/themes/theme-default/src/client/components/VPSidebarItem.vue
+++ b/themes/theme-default/src/client/components/VPSidebarItem.vue
@@ -163,13 +163,18 @@ onBeforeUnmount(() => {
     color: var(--vp-c-accent);
     font-weight: 600;
   }
-}
 
-a.vp-sidebar-item {
-  cursor: pointer;
+  .auto-link {
+    display: block;
+  }
 
-  &:hover {
-    color: var(--vp-c-accent);
+  &.auto-link {
+    display: block;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--vp-c-accent);
+    }
   }
 }
 </style>
diff --git a/themes/theme-default/src/client/components/VPSidebarItems.vue b/themes/theme-default/src/client/components/VPSidebarItems.vue
index 6ddb55bcb8..a86ed9fcba 100644
--- a/themes/theme-default/src/client/components/VPSidebarItems.vue
+++ b/themes/theme-default/src/client/components/VPSidebarItems.vue
@@ -17,7 +17,7 @@ onMounted(() => {
 
       // get the active sidebar item DOM, whose href equals to the current route
       const activeSidebarItem = document.querySelector(
-        `.vp-sidebar a.vp-sidebar-item[href="${route.path}${hash}"]`,
+        `.vp-sidebar .vp-sidebar-item.auto-link[href="${route.path}${hash}"]`,
       )
       if (!activeSidebarItem) return
 
@@ -74,9 +74,5 @@ onMounted(() => {
     padding: 0;
     list-style-type: none;
   }
-
-  a {
-    display: inline-block;
-  }
 }
 </style>
diff --git a/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue b/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
index 25b292fd89..2325ff9015 100644
--- a/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/components/ArticleList.vue
@@ -104,15 +104,8 @@ defineProps({
       transform: scaleX(0);
     }
 
-    &:hover {
-      &::after {
-        visibility: visible;
-        transform: scaleX(1);
-      }
-    }
-
-    a {
-      color: inherit;
+    &:hover::after {
+      visibility: visible;
     }
   }
 
diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
index f6bbb24183..8bfd9399ef 100644
--- a/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/layouts/Category.vue
@@ -43,7 +43,7 @@ const categoryMap = useBlogCategory('category')
   padding-bottom: 0 !important;
   font-size: 14px;
 
-  a {
+  .route-link {
     color: inherit;
   }
 
diff --git a/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue b/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
index e7193541cc..b871a17c9b 100644
--- a/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
+++ b/tools/create-vuepress/template/blog/.vuepress/layouts/Tag.vue
@@ -43,7 +43,7 @@ const tagMap = useBlogCategory('tag')
   padding-bottom: 0 !important;
   font-size: 14px;
 
-  a {
+  .route-link {
     color: inherit;
   }