提问者:小点点

我正在尝试使一条线出现从分隔的两个其他当悬停(在过渡)


当我尝试使用display:none在HTML中显示一个不可见的文本行时,没有任何过渡,而使用font-size:0em时,不可见的行在另两个文本行之间形成一个空格。 你有什么想法吗?


共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: 0px
height: 0px;
transition: 0.3s;
background: #000;
}
.container:hover .line {
height: 50px;
width: 10px;
tranision: 0.3s;
}