css: nach dem Überschreiben bestehender Stile

Question

Ich benutze asp.net mvc-Anwendung, um ein erforderliches Symbol * und auch ein Hilfesymbol zu zeigen? als Zeichen. Aber die ? überschreibt der * und ich kann endlich nur einen sehen? Symbol. Wie kann ich beide Symbole zeigen?

PS: Ich versuche in diesem Zusammenhang 2 Symbole anstelle von Text zu verwenden. Ich überprüfe, ob wir eine Option haben, um die Symbole anstelle von Text unterzubringen.

Asp.Net MVC-Code ein Etikett

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

CSS-Code zeigen * und angezeigt werden? nach Etikett

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

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

Answer 1

Sie können einen CSS-Selektor, die überprüfen, ob ein Element beide Klassen gelten 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; 
} 

Falls Sie ein Icon angezeigt werden soll:

.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

Wenn Sie nur habe 2 mögliche Symbole, mein Vorschlag wäre, sowohl :before und :after zu verwenden. Da diese Pseudo-Elemente nur einmal pro Element verwendet werden können (ohne sich gegenseitig zu übersteuern), haben Sie die Flexibilität, die 2 Pseudo-Elemente gleichzeitig anwenden zu können, wobei jedes seine eigenen unabhängigen Stile haben kann. Möglicherweise müssen Sie ein wenig zusätzlichen CSS hinzufügen, um die Symbole richtig zu positionieren, aber das sollte einfach sein. Beachten Sie, dass dies nicht funktioniert, wenn Sie 3+ Symbole anwenden müssen, da nur 2 Pseudoelemente vorhanden sind, :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

Basierend auf Mohamad Antwort, eine Möglichkeit, die Icons ohne Notwendigkeit, umfasst das zusammengesetzte Bild

.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

Was ist strategisch Überschreiben der :after zu schaffen? Sie können dies tun, indem Sie dieses CSS hinzufügen.

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

DEMO