如何在hover时平移文本下方的伪元素(::before/::after)？

核心问题修正 #

1. 原代码未给<a>标签设置position: relative，导致伪元素的绝对定位基准错误，无法基于文本宽度计算平移范围
2. hover时重复设置transform属性会产生覆盖，且translateX(100%)是基于圆点自身宽度，而非文本容器宽度

完整修复代码 #

.wrapper ul li a {
  /* 关键：让伪元素以文本容器为定位基准 */
  position: relative;
  /* 给文本底部留间距，避免圆点和文本重叠 */
  padding-bottom: 5px;
  /* 让a标签宽度适配文本内容 */
  display: inline-block;
}

.wrapper ul li a::before{
  display: block;
  position: absolute;
  content: "";
  background-color: black;
  height: 3px;
  width: 3px;
  bottom: 0;
  left: 0;
  /* 初始隐藏圆点 */
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.wrapper ul li a:hover::before{
  opacity: 1;
  /* 平移距离=文本宽度-圆点自身宽度，刚好停在文本右端 */
  transform: translateX(calc(100% - 3px));
}

代码说明 #

• display: inline-block：确保<a>标签宽度完全匹配文本内容，而非撑满父容器
• position: relative：将伪元素的绝对定位锚定在文本容器上，保证平移范围准确对应文本宽度
• calc(100% - 3px)：精准计算平移距离，避免圆点超出文本范围
• 用opacity控制显示/隐藏，替代原scale(0)，避免缩放带来的视觉变形

内容的提问来源于stack exchange，提问作者Jiří Szopa