css :after overriding existing styles

Question

I am using asp.net mvc application to show a required symbol * and also a help symbol ? as characters. But the ? is overriding the * and I can finally see only one ? symbol. How can I show both the synmbols?

PS: I am trying to use 2 icons instead of text in this context. I am checking if we have an option to accommodate the icons instead of text.

Asp.Net MVC Code to show a label

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

Css Code to display * and ? after label

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

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

Answer 1

You can have a css selector that check if an element have both classes apply 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;
}

If you want an Icon to display:

.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;
}