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>

过渡到工作后无法获得：

1 个答案: