减小border-bottom与文本间距并实现过渡动画遇阻

嘿，我完全懂你遇到的困扰——用::after伪元素来缩小底部边框和文本的间距确实是个聪明的思路，但过渡失效往往是因为你没给伪元素的初始状态设置好动画的「起点」。不用折腾额外的div或span，只靠nav和它的::after就能完美解决，咱们直接上方案：

核心思路 #

通过给nav设置相对定位，让::after伪元素基于它精准定位；给伪元素设置初始的「不可见/未展开」状态，再在hover时触发属性变化，同时给伪元素加上过渡属性，就能实现带间距控制的边框动画。

完整代码示例 #

HTML

<nav><a href="#">我的导航链接</a></nav>

CSS

nav {
  position: relative; /* 让伪元素以它为定位基准 */
  display: inline-block; /* 让nav宽度适配文本，避免边框拉满整行 */
  padding: 6px 0; /* 上下内边距，配合下面的bottom值控制间距 */
  font-size: 16px;
}

/* 初始状态的底部边框伪元素 */
nav::after {
  content: '';
  position: absolute;
  bottom: 0; /* 紧贴nav底部，改成bottom:1px就能让边框往上挪，离文本更近 */
  left: 0;
  width: 0; /* 初始宽度为0，hover时展开 */
  height: 2px; /* 边框的厚度 */
  background-color: #007bff; /* 蓝色边框颜色 */
  transition: width 0.3s ease-in-out; /* 过渡动画的时长和缓动效果 */
}

/* hover时触发边框展开动画 */
nav:hover::after {
  width: 100%; /* 宽度拉满，实现从左到右的展开效果 */
}

进阶：从中间展开的动画效果 #

如果想要更酷炫的从中间向两边展开的动画，只需要调整伪元素的初始属性：

nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #007bff;
  transform: scaleX(0); /* 初始缩放为0，隐藏边框 */
  transform-origin: center; /* 以中心点为缩放原点 */
  transition: transform 0.3s ease;
}

nav:hover::after {
  transform: scaleX(1); /* hover时缩放回100%，实现中间展开效果 */
}

关键说明 #

1. 间距控制：你可以通过调整nav的padding-bottom或者::after的bottom值，精准控制边框和文本的距离——比如把bottom设为2px，边框就会往上移动2px，离文本更近。
2. 过渡生效的原因：给::after本身加上transition属性，并且初始状态和hover状态的属性值（比如width/transform）都有明确的取值，浏览器才能识别出需要动画的属性变化。

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