CSS-转换字体大小不起作用

Question

只是试图模仿的效果，你可以在这里找到：（https://www.gaastrastore.com/en-de/men）：

（顶部菜单，鼠标悬停在列表中的项目，进入向右移动，并获得了两次箭头在前面）

我试图让这两个箭头工作。我得到了正确的工作。我试图使用从0px到10px的转换和字体大小的箭头。有任何想法吗？如果可能的话，我想坚持使用CSS。

干杯

Answer 1

而不是使用font-size从字体大小0px to 10px增加，你可以使用margin-left隐藏和显示span标签上，你作为下面添加过渡，

ul { 
 
    padding: 0; 
 
    margin: 40px; 
 
    overflow: hidden; 
 
} 
 

 
ul > li { 
 
    list-style-type: none; 
 
} 
 

 
ul > li > span { 
 
    margin-left: -10px; 
 
    transition: 0.5s ease; 
 
} 
 

 
ul > li:hover > span { 
 
    margin-left: 0px; 
 
}

<ul> 
 
    <li><span>></span> Home</li> 
 
    <li><span>></span> About</li> 
 
    <li><span>></span> Contact</li> 
 
</ul>