我试图在悬停时（转换中）使一条线从另外两条线中分离出来

Question

当我尝试在 HTML 中添加一条不可见的文本行时，但 display: none 没有过渡，而 font-size : 0em 中的不可见行形成 space 在另外两个之间。你有什么想法吗？

Answer 1

您可以尝试使用 height/width 0px 创建线条，然后在悬停时将其设置为 height/width 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;
}

我试图在悬停时（转换中）使一条线从另外两条线中分离出来

I'm trying to make a line appear from separation of two other when hover (in transition)

html

css

transition