Сочетание :after и :hover для динамического оформления списка.

В CSS сочетание псевдоэлементов, таких как :after, с состояниями наведения может улучшить визуальное воздействие элементов списка. Предположим, у вас есть список, в котором выбранные элементы отображаются в форме стрелки с использованием :after. Чтобы добиться аналогичного эффекта для элементов, на которые наводится курсор, выполните следующие действия:

Приведенный код CSS определяет стилизованный список со стилем по умолчанию для всех элементов списка (#alertlist li), измененным стилем для выбранных элементов. (#alertlist li.selected) и стиль для элементов, на которые наведен курсор (#alertlist li:hover).

Чтобы объединить :after с селектором :hover, добавьте :after к #alertlist li:hover просто как и в случае с #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: "";
}

Объединив псевдоэлемент :after с селекторами .selected и :hover, вы можете легко применить форму стрелки как к выбранным, так и к наведенным элементам списка, создавая динамичную и привлекательную визуальную подсказку.