diff --git a/css/src/components/vertical-tabs.css b/css/src/components/vertical-tabs.css
index 82cc2ca..3948e92 100644
--- a/css/src/components/vertical-tabs.css
+++ b/css/src/components/vertical-tabs.css
@@ -205,7 +205,7 @@
   right: 0; /* LTR */
   bottom: calc(var(--vertical-tabs-border-size) * -1);
   left: calc(var(--vertical-tabs-menu-link--active-border-size) * -1); /* LTR */
-  z-index: -1;
+  z-index: 0;
   pointer-events: none;
   background-clip: padding-box;
 }
@@ -272,6 +272,11 @@
   }
 }
 
+.vertical-tabs__menu-link-content {
+  position: relative;
+  z-index: 1;
+}
+
 /**
  * Details summary in vertical tabs menu link and in the summary of the details.
  */
@@ -296,6 +301,7 @@
   border: var(--vertical-tabs-border);
   border-radius: var(--vertical-tabs-border-radius);
   box-shadow: var(--vertical-tabs-shadow);
+  box-sizing: border-box;
 }
 
 /* This modifier is added by JavaScript. */
@@ -303,6 +309,8 @@
   flex: 1 0 var(--vertical-tabs-pane-width);
   margin-top: 0;
   margin-bottom: 0;
+  position: relative;
+  z-index: 1;
 }
 
 @media screen and (min-width: 38em) {
diff --git a/js/claro.vertical-tabs.es6.js b/js/claro.vertical-tabs.es6.js
index eaffd79..523e3ff 100644
--- a/js/claro.vertical-tabs.es6.js
+++ b/js/claro.vertical-tabs.es6.js
@@ -252,7 +252,7 @@
       this.item.addClass('is-selected');
       // Mark the active tab for screen readers.
       $('#active-vertical-tab').remove();
-      this.link.append($(Drupal.theme.verticalTabActiveTabIndicator())
+      this.title.after($(Drupal.theme.verticalTabActiveTabIndicator())
         .attr('id', 'active-vertical-tab'));
     },
 
@@ -368,8 +368,9 @@
     const tab = {};
     tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>')
       .append((tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>')
-        .append((tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>').text(settings.title)))
-        .append((tab.summary = $('<span class="vertical-tabs__menu-link-summary"></span>')))));
+        .append($('<span class="vertical-tabs__menu-link-content"></span>')
+          .append((tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>').text(settings.title)))
+          .append((tab.summary = $('<span class="vertical-tabs__menu-link-summary"></span>'))))));
     return tab;
   };
 
diff --git a/js/claro.vertical-tabs.js b/js/claro.vertical-tabs.js
index 05c9406..0582a5c 100644
--- a/js/claro.vertical-tabs.js
+++ b/js/claro.vertical-tabs.js
@@ -146,7 +146,7 @@
       this.item.addClass('is-selected');
 
       $('#active-vertical-tab').remove();
-      this.link.append($(Drupal.theme.verticalTabActiveTabIndicator()).attr('id', 'active-vertical-tab'));
+      this.title.after($(Drupal.theme.verticalTabActiveTabIndicator()).attr('id', 'active-vertical-tab'));
     },
     updateSummary: function updateSummary() {
       var summary = this.details.drupalGetSummary();
@@ -186,7 +186,7 @@
 
   Drupal.theme.verticalTab = function (settings) {
     var tab = {};
-    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append(tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>').text(settings.title)).append(tab.summary = $('<span class="vertical-tabs__menu-link-summary"></span>')));
+    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append($('<span class="vertical-tabs__menu-link-content"></span>').append(tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>').text(settings.title)).append(tab.summary = $('<span class="vertical-tabs__menu-link-summary"></span>'))));
     return tab;
   };