Połączyć: po: hover

Question

Chcę połączyć :after z :hover w CSS (lub dowolnym innym selektorze pseudo). Zasadniczo mam listę i element z klasą selected ma kształt strzałki zastosowany przy użyciu :after. Chcę, żeby to samo było prawdziwe w przypadku obiektów, nad którymi się porusza, ale nie mogę go uruchomić. Herezje kod

#alertlist 
{ 
    list-style:none; 
    width: 250px; 
} 
#alertlist li 
{ 
    padding: 5px 10px; 
    border-bottom: 1px solid #e9e9e9; 
    position:relative; 
} 
#alertlist li.selected, #alertlist li:hover 
{ 
    color: #f0f0f0; 
    background-color: #303030; 
} 

#alertlist li.selected:after 
{ 
    position:absolute; 
    top: 0; 
    right:-10px; 
    bottom:0; 

    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-left: 10px solid #303030; 
    content: ""; 
} 

<ul id="alertlist"> 
    <li>Alert 123</li> 
    <li class="selected">Alert 123</li> 
    <li>Alert 123</li> 
</ul> 

Answer 1

Wystarczy dołączyć :after do selektora #alertlist li:hover tak samo zrobić z selektora #alertlist li.selected:

#alertlist li.selected:after, #alertlist li:hover:after 
{ 
    position:absolute; 
    top: 0; 
    right:-10px; 
    bottom:0; 

    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-left: 10px solid #303030; 
    content: ""; 
} 

Answer 2

#alertlist li:hover:after,#alertlist li.selected:after 
{ 
    position:absolute; 
    top: 0; 
    right:-10px; 
    bottom:0; 

    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-left: 10px solid #303030; 
    content: ""; 
}​ 

jsFiddle Link

Answer 3

w SCSS

&::after{ 
content: url(images/RelativeProjectsArr.png); 
margin-left:30px; 
} 

&:hover{ 
    background-color:$turkiz; 
    color:#e5e7ef; 

    &::after{ 
    content: url(images/RelativeProjectsArrHover.png); 
    } 
}