सीएसएस: मौजूदा शैलियों को ओवरराइड करने के बाद

Question

मैं एक आवश्यक प्रतीक दिखाने के लिए एएसपीएनटी एमवीसी एप्लीकेशन का उपयोग कर रहा हूं * और एक सहायता प्रतीक भी? पात्रों के रूप में लेकिन वो ? * ओवरराइड कर रहा है और मैं अंत में केवल एक ही देख सकता हूं? प्रतीक। मैं समनुरूप दोनों कैसे दिखा सकता हूं?

पीएस: मैं इस संदर्भ में पाठ के बजाय 2 आइकन का उपयोग करने की कोशिश कर रहा हूं। मैं जांच कर रहा हूं कि क्या हमारे पास पाठ के बजाय आइकन को समायोजित करने का विकल्प है।

Asp.Net MVC कोड एक लेबल

@Html.LabelFor(model => model.myDetails, new { @class = "required labelHelp" }) 

CSS कोड प्रदर्शित करने के लिए * और दिखाने के लिए? लेबल

.required:after 
{ 
    content: "*"; 
    padding-left: 3px; 
    color: #f00; 
} 

.labelHelp:after 
{ 
    content: "?"; 
    padding-left: 30px; 
    color: #f00; 
} 

Answer 1

करने के बाद आपको एक सीएसएस चयनकर्ता कि जाँच हो सकता है एक तत्व है, तो दोनों वर्गों लागू content: "* ?"

.required:after 
{ 
    content: "*"; 
    padding-left: 3px; 
    color: #f00; 
} 

.labelHelp:after 
{ 
    content: "?"; 
    padding-left: 30px; 
    color: #f00; 
} 

.required.labelHelp:after 
{ 
    content: "* ?"; 
    padding-left: 30px; 
    color: #f00; 
} 

आप प्रदर्शित करने के लिए एक चिह्न चाहते हैं:

.required:after 
{ 
    content: ""; 
    background-image: url(/images/required.png); 
    width: 16px; 
    height: 16px; 
    padding-left: 3px; 
    color: #f00; 
} 

.labelHelp:after 
{ 
    content: ""; 
    background-image: url(/images/labelHelp.png); 
    width: 16px; 
    height: 16px; 
    padding-left: 3px; 
    color: #f00; 
} 

.required.labelHelp:after 
{ 
    content: ""; 
    background-image: url(/images/required_labelHelp.png); 
    /* required_labelHelp.png should be an image that contains both required and labelHelp png*/ 
    width: 32px; 
    height: 16px; 
    padding-left: 3px; 
    color: #f00; 
} 

Answer 2

आप अगर केवल 2 संभावित आइकन हैं, मेरा सुझाव :before और :after दोनों का उपयोग करना होगा। चूंकि इन छद्म-तत्वों का उपयोग प्रति तत्व एक बार (एक-दूसरे को ओवरराइड किए बिना) किया जा सकता है, इससे आपको एक ही समय में 2 छद्म तत्वों को लागू करने की लचीलापन मिलती है, जहां प्रत्येक के पास अपनी स्वतंत्र शैलियों हो सकती हैं। आइकन को सही ढंग से स्थिति देने के लिए आपको थोड़ा सी अतिरिक्त सीएसएस जोड़ने की आवश्यकता हो सकती है, लेकिन यह सीधा होना चाहिए। नोट यह काम नहीं करेगा यदि आपको 3+ आइकन लागू करने की आवश्यकता है क्योंकि केवल 2 छद्म तत्व हैं, :before & :after।

.required:after 
{ 
    content: "*"; 
    background-image: url(/images/required.png); 
    padding-left: 3px; 
    color: #f00; 
} 

.labelHelp:before 
{ 
    content: "?"; 
    background-image: url(/images/labelHelp.png); 
    padding-left: 30px; 
    color: #f00; 
} 

Answer 3

मोहम्मद जवाब के आधार पर, एक तरह से समग्र छवि

.required.labelHelp:after { 
 
    content: ""; 
 
    background-image: 
 
    url(http://placekitten.com/g/64/64), 
 
    url(http://placekitten.com/g/64/60); 
 
    background-position: 
 
    left top, 
 
    right top; 
 
    background-size: 
 
    60px 
 
    60px; 
 
    background-repeat: no-repeat; 
 
    width: 120px; 
 
    height: 60px; 
 
    position: absolute; 
 
}

<label class="required labelHelp">text</label>

Answer 4

रणनीतिक :after अधिभावी के बारे में क्या बनाने के लिए आवश्यकता के बिना माउस शामिल करने के लिए? आप यह सीएसएस जोड़कर ऐसा कर सकते हैं।

.required.labelHelp:after 
{ 
    content: "* ?"; 
    padding-left: 3px; 
    color: #f00; 
} 

DEMO