डायनामिक लिस्ट स्टाइलिंग के लिए :after और :hover का संयोजन

CSS में, :after जैसे छद्म तत्वों को होवर स्टेट्स के साथ संयोजित करने से वृद्धि हो सकती है सूची आइटम का दृश्य प्रभाव. मान लीजिए कि आपके पास एक सूची है जहां चयनित आइटम :after का उपयोग करके एक तीर का आकार प्रदर्शित करते हैं। मँडराए जाने वाले आइटम के लिए समान प्रभाव प्राप्त करने के लिए, इन चरणों का पालन करें:

प्रदान किया गया सीएसएस कोड एक स्टाइल सूची को परिभाषित करता है, जिसमें सभी सूची आइटम के लिए एक डिफ़ॉल्ट शैली (#alertlist li), चयनित आइटम के लिए एक संशोधित शैली होती है। (#alertlist li.selected), और ऊपर होवर किए जाने वाले आइटम के लिए एक शैली (#alertlist li:hover)।

:after को :hover चयनकर्ता के साथ संयोजित करने के लिए, जोड़ें :after to #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 दोनों चयनकर्ताओं के साथ जोड़कर, आप आसानी से चयनित और होवर किए गए दोनों सूची आइटमों पर तीर आकार लागू कर सकते हैं, एक गतिशील और आकर्षक दृश्य संकेत बना सकते हैं।