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

Answer 2

If you only have 2 possible icons, my suggestion would be to use both :before and :after. Since these pseudo-elements can only be used once per element (without overriding each other), this gives you the flexibility of having the 2 pseudo-elements applied at the same time, where each can have its own independent styles. You might need to add a little bit of additional CSS to correctly position the icons, but that should be straightforward. Note this would not work if you need to apply 3+ icons since there are only 2 pseudo-elements, :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;
}