CSS行高动画需求：实现中间扩散效果（无JS/jQuery）

直接用line-height过渡确实达不到你要的「中间向两侧扩散」效果——因为line-height的变化是基于文本基线的，动画过程中文本位置会偏移，视觉上是从上到下（或反之）展开，而不是从中心向外扩展。

给你两个纯CSS的可行方案，都不需要JS，选哪个看你需求：

方案一：用上下内边距过渡（最简洁） #

这个方法最直接，核心是固定文本自身的行高，通过上下内边距的同时增加来模拟行高扩展，文本始终保持居中，动画自然就是从中间向两侧扩散：

* { border: 0; margin: 0; padding: 0; }
h1 {
  margin-top: 30px;
  text-align: center;
  line-height: 30px; /* 固定文本行高，确保垂直居中 */
  padding: 0;
  transition: padding 0.3s ease-in-out;
}
h1:hover {
  padding: 15px 0; /* 上下内边距各加15px，总高度从30→60px */
}

原理说明： #

• 文本的line-height固定为初始的30px，保证它始终在容器垂直中心位置。
• hover时给上下内边距各加15px，容器总高度变为30px + 15px*2 = 60px，和你原需求的行高变化一致。
• 过渡padding属性时，上下内边距会同时增大，视觉上就是行高从中间向两侧扩散，文本位置完全不动。

方案二：用伪元素模拟上下扩展（更灵活） #

如果需要更精细的控制（比如上下扩展的动画速度不同，或者要给扩展区域加背景），可以用伪元素来实现：

* { border: 0; margin: 0; padding: 0; }
h1 {
  margin-top: 30px;
  text-align: center;
  display: flex;
  align-items: center; /* 强制文本垂直居中 */
  justify-content: center;
  height: 30px; /* 初始高度对应原行高 */
  overflow: hidden;
  position: relative;
}

/* 上下两个伪元素，负责扩展高度 */
h1::before, h1::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  transition: height 0.3s ease-in-out;
  background: #ffffff; /* 和背景色一致，避免遮挡文本 */
}

h1::before {
  top: 0; /* 顶部伪元素 */
}

h1::after {
  bottom: 0; /* 底部伪元素 */
}

h1:hover::before, h1:hover::after {
  height: 15px; /* 每个伪元素扩展15px，总高度从30→60px */
}

原理说明： #

• 用flex布局让文本固定在容器中心，初始容器高度设为30px。
• 上下伪元素初始高度为0，hover时各自增加15px，容器总高度变为60px。
• 过渡伪元素的height属性，上下同时扩展，完美实现从中间向外扩散的效果，还能单独给伪元素加样式（比如背景渐变）。

这两个方案都完全符合你的需求：纯CSS实现，动画从中间向两侧扩散，不需要任何JS/jQuery。

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