如何将Tooltip元素居中定位在其前兄弟链接元素下方

我希望将对话气泡样式的Tooltip居中显示在链接下方，当前的实现因使用额外的.tooltip-container仍无法达到预期效果。理想状态是仅保留<a>和.tooltip两个元素，且仅对这两个元素添加样式。

当前问题：Tooltip未与链接对齐，偏离到非目标位置；
期望效果：Tooltip精准居中在链接正下方，对话气泡的箭头指向链接底部中心。

修改后的代码 #

HTML结构

Up ahead is a
<a href="#" class="link-with-tooltip">
  Button text
</a>
<div class="tooltip">
  Tooltip explanation of button
</div>

CSS样式

.link-with-tooltip {
  position: relative;
  display: inline-block; /* 确保链接边界完全包裹文本，作为定位基准 */
}

.tooltip {
  position: absolute;
  z-index: 1;
  background-color: #555;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  top: calc(100% + 0.5em); /* 链接底部与tooltip之间保留0.5em间距 */
  left: 50%;
  transform: translateX(-50%); /* 基于自身宽度向左偏移50%，实现水平居中 */
}

.tooltip:before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background-color: #555;
}

关键修改说明 #

• 为链接添加position: relative，使其成为tooltip的定位父容器，tooltip的定位将基于链接的边界计算；
• 使用left: 50%结合transform: translateX(-50%)，让tooltip相对于链接的水平中心对齐，无论链接文本长度如何都能保持居中；
• 通过top: calc(100% + 0.5em)直接控制tooltip与链接的间距，替代原有的margin-top，逻辑更清晰；
• 移除了多余的.tooltip-container，仅保留<a>和.tooltip两个元素，完全符合结构需求。

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