css – SASS：after：悬停选择器[复制]

参见英文答案 > How to write :hover condition for a:before and a:after?                                    6个
如何在悬停状态下在伪选择器中使用SASS选择器？想要编写更少的代码并清理它.

首选方法,不工作：

div {
    a {
        transition: all 0.25s ease-in-out;
        &:after {
            content: ">>";
            left: 10px;
            :hover & {
                left: 10px;
            }
        }
    }
}

相反：

div {
    a {
        transition: all 0.25s ease-in-out;
        &:after {
            content: ">>";
            left: 10px;
        }
        &:hover {
            &:after {
                left: 10px;
            }
        }
    }
}

最佳答案

使用&：hover：after {}来定位悬停在其上的元素的after伪元素.

&：after：hover {}将选择after伪元素并用于悬停它.