Объединить: после: hover

Я хочу совместить :after :hover в CSS (или любой другой псевдо-селектор). У меня в основном есть список, и элемент с selected classом имеет форму стрелки, применяемую с помощью :after . Я хочу, чтобы то же самое было верно для объектов, которые зависают, но не могут заставить его работать. Вот код

 #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: ""; } 
  • Alert 123
  • Alert 123
  • Alert 123

Просто добавьте :after вашего # #alertlist li:hover selector так же, как и с вашим # #alertlist li.selected selector:

 #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: ""; } 

в scss

 &::after{ content: url(images/RelativeProjectsArr.png); margin-left:30px; } &:hover{ background-color:$turkiz; color:#e5e7ef; &::after{ content: url(images/RelativeProjectsArrHover.png); } } 
  #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

  • :: перед выпуском порядка псевдоэлементной укладки
  • Объединить атрибуты CSS и псевдоэлементы?
  • Могу ли я изменить высоту изображения в CSS: до /: после псевдоэлементов?
  • Давайте будем гением компьютера.