結合: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 選擇器結合，您可以輕鬆地將箭頭形狀應用於選定和懸停的列表項，從而創建動態且引人入勝的視覺提示。