How to change specific element when hover?

Question

So the problem is when I hover on the text I want it change color of the text only, but instead the slash also change color. How can I fix it? Thank you for spending your time.

I have try :not(:hover) but it seem doesn't work. I don't know if I have misunderstood this somewhere.

This is the code I try with :not(:hover)

const Mya = styled.a`
    display:inline-block;
    color:${props => (theme[props.state][0])};
    text-decoration:none;
    position:relative;
    text-transform: capitalize;
    padding-left: 10px;
    font-weight:600;
    font-size:15px;
    font-family:Helvetica;
    margin: 0 0 0 10px;

    :before{
        content:"/";
        position:relative;
        margin-right:10px;
        :not(:hover){
            color:#cbcbcb;
        }
    };

    :first-child:before{
        content:"";

    }

    :after{
        content:"";
        position:relative;
        display:inline-block;
    };

    :hover{
        color:#186af8;

    };
`

Answer 1

If you define :hover above :before and define the color inside :before{color:#fff;} then the color should inherit correctly.

https://jsfiddle.net/7ym3q2jx/

const Mya = styled.a`
display:inline-block;
color:${props => (theme[props.state][0])};
text-decoration:none;
position:relative;
text-transform: capitalize;
padding-left: 10px;
font-weight:600;
font-size:15px;
font-family:Helvetica;
margin: 0 0 0 10px;

:hover{
    color:#186af8;
};

:before{
    content:"/";
    position:relative;
    margin-right:10px;
    color:#cbcbcb;
};

:first-child:before{
    content:"";

}

:after{
    content:"";
    position:relative;
    display:inline-block;
};


`