css - 无法获取 :after transition to work

Question

我似乎无法让不透明度过渡在 :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;
}

Answer 1

它正在工作尝试给 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>