SASS：after：hover selector

Question

ホバー状態の疑似セレクター内で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;
            }
        }
    }
}

Answer 1

使用する &:hover:after {}ホバーされている要素のafter疑似要素をターゲットにするため。

&:after:hover {}はafter疑似要素を選択し、ホバーするときに使用されます。