滑动边框在Block容器生效却在Grid容器失效的原因及解决方法

1. 为什么Block容器里滑动边框正常，Grid容器里却没效果？ #

核心有两个问题：

• hover规则漏写了Grid容器的输入框：你写的CSS里，只有#inputInsideBlock（Block里的输入框）有hover触发边框动画的规则，完全没给#inputInsideGrid加对应的规则，所以Grid里的输入框鼠标放上去根本不会触发动画。
• Grid布局的子元素排列逻辑：Grid容器会把直接子元素（这里的<input>和<span>）当成独立的网格项，默认会按列排列，<span>的宽度没法和输入框对齐，就算触发了动画也看不到明显效果。

2. 怎么在Grid容器里实现一样的滑动边框？ #

可以从补全规则和调整布局两个方向解决，下面给两种可行方案：

方案一：调整Grid布局规则（不修改HTML） #

修复后的CSS

/* 设置容器显示类型 */
.blockContainer {
  display: block;
}

.gridContainer {
  display: grid;
  grid-template-areas: "areaOne";
}

/* 容器宽度适配内容 */
.blockContainer,
.gridContainer {
  width: fit-content;
}

/* 输入框基础样式 */
#inputInsideBlock,
#inputInsideGrid {
  background-color: lightblue;
  border: none;
  outline: none;
  /* 让输入框占用指定网格区域 */
  grid-area: areaOne;
}

/* 滑动边框基础样式 */
#inputInsideBlock+span:after,
#inputInsideGrid+span:after {
  display: block;
  content: '';
  border-bottom: 1px solid black;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
  transform-origin: 100% 50%;
  /* 让span和输入框共享网格区域，保证宽度一致 */
  grid-area: areaOne;
  /* 调整margin让边框显示在输入框下方，数值根据输入框高度改 */
  margin-top: 28px;
}

/* 给两个输入框都加hover触发规则 */
#inputInsideBlock:hover+span:after,
#inputInsideGrid:hover+span:after {
  transform: scaleX(1);
  transform-origin: 100% 50%;
}

关键改动：

• 补全了#inputInsideGrid:hover+span:after的hover规则，让Grid里的输入框能触发动画。
• 给Grid内的<input>和<span>都设置grid-area: areaOne，让它们共享同一个网格区域，确保<span>宽度和输入框完全匹配。
• 用margin-top把<span>推到输入框下方，保证边框位置正确。

方案二：包裹子元素（更简单，修改少量HTML） #

直接把Grid容器里的<input>和<span>用一个<div>包起来，让这个<div>成为Grid的唯一子元素，这样布局逻辑就和Block容器完全一致了：

修改后的HTML

<div class="gridContainer">
  <div>
    <input id="inputInsideGrid" type="text" placeholder="input inside grid container"><span></span>
  </div>
</div>

对应的CSS只需补全hover规则

把原来的hover部分改成下面这样就行，其他CSS不用动：

#inputInsideBlock:hover+span:after,
#inputInsideGrid:hover+span:after {
  width: 100%;
  transform: scaleX(1);
  transform-origin: 100% 50%;
}

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