SASS :after :hover selector

Question

How do I use a SASS selector within a pseudo selector on a hover state? Wanting to write less code and clean this up.

Preferred method, not working:

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

As opposed to:

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

`:hover &` targets `:hover` *inside* of the `:after`, rather than on it, does it not? — TylerH, Apr 29 '16 at 19:37
On the first example it does. Trying to grab the outside parent element as a selector. — Alexander Graham, Apr 29 '16 at 19:38
Did you even *look* at the compiled output? When there's only one possible order of selectors that will work, you have to write the selectors in that order. No amount of wishing will change anything. — cimmanon, Apr 29 '16 at 20:06

score 26 · Accepted Answer · edited Sep 05 '17 at 20:51

26

Use &:hover:after {} for targeting the after pseudo-element of the element being hovered over.

&:after:hover {} would select the after pseudo-element and used on hover it.

edited Sep 05 '17 at 20:51

General_Twyckenham

2,161
2
21
36

answered Apr 29 '16 at 19:38

Jan Franta

1,691
2
16
25

1

That's probably as clean as I can get it, I suppose. Not bad. – Alexander Graham Apr 29 '16 at 19:39
An explanation would be nice. – Ferit Mar 06 '22 at 19:40

SASS :after :hover selector

1 Answers1