无法获得：过渡到工作后

Posted 2023-03-06

【中文标题】无法获得：过渡到工作后

【英文标题】：Can't get :after transition to work

【发布时间】：2018-05-01 20:29:03

【问题描述】：

我似乎无法让不透明度过渡在 :after 伪元素上工作，但在 :before 元素上的相同过渡效果非常好。任何帮助表示赞赏！

.top-nav li a:hover:after 
    content: "/";
    display: inline-block;
    opacity: 1;
    transition: opacity 0.2s;
    margin-left: 10px;


.top-nav li a:after 
    content: "/";
    display: inline-block;
    opacity: 0;
    transition: opacity 0.2s;
    margin-left: 10px;
    position: absolute;


.top-nav li a:hover:before 
    content: "/";
    display: inline-block;
    opacity: 1;
    transition: opacity 0.2s;
    margin-right: 10px;


.top-nav li a:before 
    content: "/";
    display: inline-block;
    opacity: 0;
    transition: opacity 0.2s;
    margin-right: 10px;

【问题讨论】：

在我使用 CSS 进行的测试中， :before 和 :after 转换都有效。一定有其他因素在起作用。一种可能性是相邻按钮位于较高的 z-index 上，并遮盖了 :after 内容。你能生成一个简化的测试用例来重现错误吗？查看控制导航布局的 CSS 和 html 标记会很有帮助。

这里是一个小提琴，展示了我在之前的评论中描述的重叠可能性：jsfiddle.net/k9euprr4 请注意第 3 和第 4 个列表项如何掩盖他们的邻居。 :after 伪内容仍然存在，只是隐藏在相邻按钮的后面。

【参考方案1】：

It's Working 尝试给 li 设置宽度然后它会显示

.top-nav li a:hover:after 
    content: "/";
    display: inline-block;
    opacity: 1;
    transition: opacity 2s;
    margin-left: 10px;
    


.top-nav li a:after 
    content: "/";
    display: inline-block;
    opacity: 0;
    transition: opacity 0.2s;
    margin-left: 10px;
    position: absolute;


.top-nav li a:hover:before 
    content: "/";
    display: inline-block;
    opacity: 1;
    transition: opacity 0.2s;
    margin-right: 10px;


.top-nav li a:before 
    content: "/";
    display: inline-block;
    opacity: 0;
    transition: opacity 0.2s;
    margin-right: 10px;


.top-nav 
  list-style: none;

.top-nav li 
  float: left;
  position: relative;
  background:white;
  width:85px;
  text-align:center;

<ul class="top-nav">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>