当我尝试使用display:none
在HTML中显示一个不可见的文本行时,没有任何过渡,而使用font-size:0em
时,不可见的行在另两个文本行之间形成一个空格。 你有什么想法吗?
您可以尝试创建高度/宽度为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: 0px
height: 0px;
transition: 0.3s;
background: #000;
}
.container:hover .line {
height: 50px;
width: 10px;
tranision: 0.3s;
}