链接hover时::before伪元素圆点展开过渡异常，如何实现左侧平滑展开

问题原因 #

最初版本出现跳变的核心原因是content属性不支持CSS过渡动画，hover触发时会直接在单个圆点和三个圆点之间无过渡切换，同时未限制内容换行，宽度变化时多余圆点会换行到下方，就出现了从底部跳出的视觉效果。

后续更新的版本思路完全正确：提前把三个圆点全部写入content属性，通过overflow: hidden配合固定宽度隐藏超出的圆点，hover时仅过渡宽度属性，加上white-space: nowrap避免内容换行，已经解决了跳变的问题。

优化后的实现（更顺滑无跳变） #

可以在现有版本的基础上微调参数，保证垂直居中、宽度匹配更精准，展开效果完全符合从左向外展开的需求：

.open-link {
  display: inline-flex; /* 改成inline-flex不破坏链接的行内特性 */
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.open-link::before {
  content: '• • •';
  overflow: hidden;
  width: 10px; /* 默认宽度仅显示第一个圆点 */
  display: inline-block;
  transition: width 0.3s ease;
  margin-right: 10px;
  white-space: nowrap;
  line-height: 1; /* 避免行高影响垂直位置 */
}
.open-link:hover::before {
  width: 34px; /* 调整为刚好容纳三个圆点的宽度，避免预留过多空白 */
}

<a class="open-link" href="#">Link</a>

效果说明 #

• 所有圆点默认就存在，仅通过宽度控制显示范围，不会出现内容切换导致的跳变
• inline-flex+align-items: center保证伪元素和文字始终垂直居中，不会上下偏移
• 仅过渡width属性，性能更高，过渡完全线性，就是从左向右逐步露出后面两个圆点的展开效果

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