CSS如何实现vertical-rl文字hover时背景高度增长动画

直接用CSS伪元素承载高亮背景，配合transition过渡做尺寸变化即可，不需要JavaScript，适配writing-mode: vertical-rl竖排场景效果稳定。

• 第一步：配置文字元素基础样式
  给目标竖排文字设置竖排属性，同时设为相对定位作为伪元素的定位基准，加适当内边距避免文字贴住背景边缘：

  .vertical-text {
    /* 核心竖排属性 */
    writing-mode: vertical-rl;
    /* 作为伪元素的定位参照物 */
    position: relative;
    /* 调整文字和背景的间距，可按需修改 */
    padding: 0.6rem 0.4rem;
    /* 保证文字层级高于背景 */
    z-index: 1;
    font-size: 1.5rem;
    cursor: pointer;
  }
  

• 第二步：设置背景层初始状态
  用::before伪元素做独立的背景层，绝对定位到文字元素的最底端，初始垂直高度设为0，层级低于文字避免遮挡内容，加上过渡属性实现平滑动画：

  .vertical-text::before {
    content: '';
    /* 高亮背景色可按需调整 */
    background-color: #ffd15c;
    position: absolute;
    /* 左右铺满文字元素宽度 */
    left: 0;
    right: 0;
    /* 定位到元素底端，作为动画生长起点 */
    bottom: 0;
    /* 初始状态背景高度为0，完全隐藏 */
    height: 0;
    /* 层级低于文字 */
    z-index: -1;
    /* 动画时长、缓动效果可按需调整 */
    transition: height 0.35s ease-out;
  }
  

• 第三步：配置hover触发的动画终态
  鼠标悬停在文字上时，将伪元素的高度设为100%，即可实现背景从底端向上逐步增长、铺满整个文字区域的效果：

  .vertical-text:hover::before {
    height: 100%;
  }
  

自定义调整技巧：

1. 如果需要背景从顶端向下生长，只需要把伪元素的bottom: 0改成top: 0即可；
2. 如果需要适配多排版场景（后续可能切换横排/其他竖排方向），可以把物理属性替换为CSS逻辑属性：将left/right替换为inset-inline: 0，bottom替换为inset-block-end: 0，height替换为block-size，动画会自动跟随writing-mode调整方向，不需要额外改代码。

对应的HTML结构参考：

<span class="vertical-text">竖排悬停高亮</span>

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