CSS :after overriding existing styles

Question

我正在使用 asp.net mvc 应用程序来显示必需的符号 * 以及帮助符号？作为字符。但是？正在覆盖 * 而我终于只能看到一个？象征。如何显示这两个符号？

PS:在此上下文中，我尝试使用 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

您可以使用一个 css 选择器来检查一个元素是否同时应用了两个类 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;
}