滑动边界在块容器内工作，但在网格容器内不工作

Question

考虑以下代码中的问题：为什么滑动边框在块容器中工作，而不是在网格容器中工作呢？

：一个人如何在网格容器中实现相同的滑动边界？

注意:我使用的是<span>，因为我不能在<input>上使用伪元素。

​

/* set different display types */

.blockContainer {
  display: block;
}

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


/* make things tidier */

.blockContainer,
.gridContainer {
  width: fit-content;
}


/* provide sliding border to both inputs */

#inputInsideBlock,
#inputInsideGrid {
  background-color: lightblue;
  border: none;
  outline: none;
}

#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%;
}

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

<div class="blockContainer">
  <input id="inputInsideBlock" type="text" placeholder="input inside block container"><span></span>
</div>

<br>

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

​

Answer 1

您只是将上一个css选择器错误地写成#inputInsideBlock两次，而不是#inputInsideBlock和#inputInsideGrid。一旦修好，它就能正常工作。

​

/* set different different display types */

.blockContainer {
  display: block;
}

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


/* make things tidier */

.blockContainer,
.gridContainer {
  width: fit-content;
}


/* provide sliding border to both inputs */

#inputInsideBlock,
#inputInsideGrid {
  background-color: lightblue;
  border: none;
  outline: none;
}

#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%;
}

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

<div class="blockContainer">
  <input id="inputInsideBlock" type="text" placeholder="input inside block container"><span></span>
</div>

<br>

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

​