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

Question

When I'm trying by having an invisible line of text in the HTML but with display: none there is no transition and with font-size : 0em the invisble line form a space between the two other. Do you have any idea ?

Answer 1

You could try creating the line with a height/width of 0px and then on hover set it as height/width 50px;

Code 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;
}