सीएसएस: सेट करने के बाद सामग्री नहीं

Question

रेखांकित नेविगेशन में लिंक अलग करने के लिए मैं है निम्नलिखित

#menu-main li a:after{ 
    content: " * "; 
} 

वर्तमान आइटम अब अतिरिक्त हो जाता है

text-decoration: underline; 

मेरी समस्या यह है कि "*" है यह भी रेखांकित किया, लेकिन नहीं

मैं

#menu-main li a:after{ 
    text-decoration: none !important; 
} 

जोड़ने की कोशिश की जाना चाहिए था

लेकिन इसका कोई प्रभाव नहीं है

क्या किसी को यह भी पता है कि टेक्स्ट को रेखांकित कैसे किया जाए, लेकिन नहीं: सामग्री के बाद?

Answer 1

सामान्य प्रवाह में, छद्म तत्व तत्व के आयामों को फैलाता है, और जो आप देखते हैं वह लिंक के नीचे की रेखा की रेखा रेखा है। सत्यापित करने के लिए a:after {text-decoration: line-through;} जोड़ें। http://jsfiddle.net/Ronny/Smr38/

असल में, जब छद्म तत्वों वे अब अपने माता पिता के तत्वों के आयामों को प्रभावित करने के लिए position: absolute का उपयोग कर, तो रेखांकन सही जगह पर काटा जाता है:

यहाँ एक प्रस्तावित समाधान है। आपको अभी भी पॉइंटर इवेंट्स, होवर स्टेट और फोकस के छल्ले जैसी चीजों का ख्याल रखना होगा, लेकिन कम से कम बाद में आप को पता लगाने के लिए मैंने छोड़ा था।

Answer 2

अगर आप मार्कअप के नियंत्रण में हैं, तो आप अपने लिंक

<a href="..."><span>your link</span></a> 

में अंतराल को सम्मिलित करते हैं और इस सीएसएस

a { text-decoration: none } 
a span { text-decoration: underline } 

ऐसा करते समय, सामग्री :after pseudoelement जीता में इंजेक्शन इस्तेमाल कर सकते हैं

अन्यथा रेखांकित नहीं किया जा सकता है, अन्यथा आप li:after (यदि यह संभव है) की शैली को लागू कर सकते हैं तो

#menu-main li:after{ 
    content: " * "; 
} 

Answer 3

यह एक पुराना सवाल है, लेकिन Google का उपयोग करके आप यही पाते हैं, इसलिए मैंने सोचा कि जब मैं "पैरेंट" के आकार में योगदान करने के लिए छद्म तत्व की आवश्यकता होती हूं और पूर्ण स्थिति निर्धारण के लिए एक विकल्प नहीं है तो मैं अपना समाधान साझा करूंगा किसी कारण:

#menu-main li a:after{ 
    content: " * "; 
    display:inline-block; /* So we can set a width */ 
    width: 0; 
    margin-left: 10px; /* "Size" of the Pseudo-element */ 
} 

के बाद से चौड़ाई 0 है, यह एक text-decoration प्रदर्शित नहीं करता है। स्वीकृत उत्तर की तुलना में इसमें आपकी शैलियों के बीच कम कोड और कम निर्भरता भी शामिल है।

Answer 4

मेरे मामले में मुझे चौड़ाई की भी आवश्यकता नहीं है, यह केवल इनलाइन-ब्लॉक जोड़ने में काम करता है।