Question

我希望在wordpress菜单项上进行转换。我计划在悬停之前插入一个图标...

现在我用一个单词来测试它，这很好用......

.academy .avia-menu-text:hover::before {
    content:'Jetzt ';
	  transition:all 3s;
-webkit-transition:all 3s;
}

但过渡不起作用。我需要顺利淡入淡出。testfile

Answer 1

如果我正确理解您的问题，您需要在元素之前添加一个动画文字。

您可以在没有悬停状态的情况下添加此元素：

.academy .avia-menu-text:before {
    width: 0; 
    transition: 3s;
    content: 'your text'; 
}
.academy .avia-menu-text:hover:before {
    width: 100%; 
}

这是我在容器中做的一个小例子

p:before{ content: 'hello world';  width: 0; display: block; overflow: hidden;  transition: .3s; position: absolute; left: -100px; top: 0; white-space: nowrap;}
p:hover:before{ width: 100%; }
div{ width: 300px; height: 100px; }
p{ position: relative; left: 100px; }

<div>
  <p>Text here</p>   
</div>

过渡之前的CSS

1 个答案: