我想让一条线在悬停时从两个其他的分离中出现（在过渡期）。

Question

当我试图在HTML中加入一行看不见的文字，但用了 display: none 没有过渡，有了 font-size : 0em 隐形线在两行之间形成一个空间，你有什么想法吗？

Answer 1

你可以尝试创建高度宽度为0px的线条，然后在悬停时将其设置为高度宽度50px。

代码HTML

<div class="container"> 
  <p>Text goes here</p>
<div class="line"></div>

CSS

.container {
  display: flex;
  justify-content: space-around;
}
.line {
  width: 0;
  height: 0;
  transition: all 0.3s;
  background: #000;
}
.container:hover .line {
  height: 50px;
  width: 10px;
  tranision: 0.3s;
}