水平标签页onClick功能正常，但active类伪元素箭头对齐异常求助

当前效果：Active标签的箭头伪元素和标签文字在同一行，没有对齐到标签底部中间
期望效果：Active标签的箭头位于按钮底部正中间，向下衔接下方内容框的顶部边框

Hey, let's fix that misaligned arrow on your active tab! I see you've got the tab switching functionality working perfectly, but the pseudo-element arrow isn't sitting where you need it. Right now it's stuck next to the tab text, when your goal is to have it centered at the bottom of the active tab, pointing down to connect with the content box below.

What's causing the issue? #

Your current CSS uses display: inline-block and vertical-align: middle for the pseudo-elements, which ties them directly to the text flow of the tab button. This means the arrow will always sit alongside the text instead of being positioned independently at the bottom.

How to fix it #

We'll adjust the CSS to use absolute positioning for the arrow, anchored to the tab button. Here's the step-by-step solution:

1. Add relative positioning to tab buttons
   This gives us a reference point so we can position the arrow exactly where we want relative to the button:

   .tab button {
     /* ... your existing styles ... */
     position: relative; /* Add this line */
   }
   

2. Rewrite the active tab's pseudo-element styles
   Replace your existing .tablinks.active:before and .tablinks.active:after styles with this code to create a centered downward arrow at the bottom of the active tab:

   .tablinks.active:after {
     content: '';
     position: absolute;
     bottom: -11px; /* Positions the arrow just below the tab's border */
     left: 50%;
     transform: translateX(-50%); /* Centers the arrow horizontally */
     width: 0;
     height: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-top: 10px solid #CBCBCB; /* Matches the content box's border color */
   }
   

Full Updated CSS #

Here's the complete CSS with all changes included:

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 0px solid #ccc;
  background-color: #fff;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border: 1px solid #ccc;
  margin-right:20px;
  position: relative; /* Added relative positioning */
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: transparent;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: transparent;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  border:1px solid #CBCBCB;
}

/* Updated active tab arrow */
.tablinks.active:after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #CBCBCB;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

Your HTML and JavaScript code don't need any changes—just swap in this updated CSS, and the arrow will be perfectly centered at the bottom of the active tab, exactly matching your desired effect.

内容的提问来源于stack exchange，提问作者user2147423