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

Answer 2

如果您只有2个可能的图标，我的建议是同时使用:before和:after。由于这些伪元素每个元素只能使用一次（不会相互覆盖），这使您可以灵活地同时应用2个伪元素，其中每个元素都有自己独立的样式。您可能需要添加一些额外的CSS来正确定位图标，但这应该是直截了当的。请注意，如果您需要应用3个以上的图标，这将无效，因为只有2个伪元素:before＆amp; :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

基于Mohamad的回答，一种包含图标的方法，无需创建合成图像

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

战略性地覆盖:after怎么样？您可以通过添加此CSS来实现此目的。

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

<强> DEMO

css：覆盖现有样式后

4 个答案: