【问题标题】：html label:after content needs to have different colors in the texthtml标签：后内容需要在文本中有不同的颜色
【发布时间】：2016-05-13 22:56:32
【问题描述】：

我已经设置了模型属性的显示名称，但如果不需要，我需要它们以冒号显示，如果需要，则需要以冒号和红色星号显示。

我不想在显示名称中添加冒号，因为我不希望冒号出现在错误消息中，并且我可能希望在没有它的地方显示它们。

我在我的 HTML 文件中使用了以下样式来添加冒号：

.my-label > label:after {
        content: ": ";
}

但是，如果需要该字段，我不知道如何在此之后显示红色星号。

我可以创建另一个样式类来包含星号，但是如果我更改颜色，它要么全红要么全黑。我不确定是否要将实际模型属性设置为必需，因为我不确定我是否需要一个通用规则来说明它是必需的。

欢迎任何有关处理此问题的更好方法的建议。

【问题讨论】：

如果它们不是必需的是什么意思？你的意思是对应的input没有required属性？
CSS :before content two colors 的可能重复项 - 之前与之后无关紧要。不幸的是，没有直接的解决方案。
你也可以给我们你的html吗？
我不确定我是否理解您，但正如之前的评论中提到的，如果您向我们展示您的 HTML 会很好（并特别指出必填字段与其他字段的区别）。跨度>
我相信我理解 OP 想要做什么。她有 2 种类型的标签（例如对于输入字段），其中一些可能是必填字段，而另一些则是可选的。对于可选的:after 应该有content: ": " 但对于必填字段content: ": *"。不过，这是一个问题——我相信星号必须是红色的，而冒号必须是黑色的。 --- 遗憾的是，我认为如果不更改 html，这是不可能的。为什么不直接将: 添加到标签本身？

标签： html css pseudo-class

【解决方案1】：

问题

不可能在单个伪元素中使用不同的颜色。在这种情况下，您可以使用:after 伪元素输出:*，但不能使字符具有不同的颜色。

解决方案 1

实现您所追求的一种可能方法是使用:before 伪元素。当然，最重要的问题是这会将星号放在label 的开头。您可以通过使 label 使用 flexbox 模型来解决此问题。这将允许更改伪元素的顺序，允许您将 :before 元素放在 label 的末尾：

.my-label > label {
  display: inline-flex;
}
.my-label.required > label:before {
  color: red;
  content: "*";
  order: 1;
}
.my-label > label:after {
  content: ":";
}

<div class="my-label">
  <label>Not required</label>
  <input type="text" />
</div>
<div class="my-label required">
  <label>Required</label>
  <input type="text" />
</div>

缺点

此解决方案的缺点是，如果用户使用的浏览器不支持 flexbox 或 IE (where a bug stops the flexbox rules being applied to pseudo elements)，星号将显示在标签之前。

解决方案 2

实现此目的的第二种方法是使用绝对定位。通过将label 设置为position: relative;，您可以通过将position: absolute; 和right: 0; 定位到:before 元素的末尾。通过添加一些正确的padding，您可以为元素“保留”空间，这样文本就不会重叠。

.my-label > label {
  /*10px is for old browsers which don't support the ch unit*/
  padding-right: 10px;
  padding-right: 1ch;
  position: relative;
}
.my-label.required > label:before {
  color: red;
  content: "*";
  position: absolute;
  right: 0;
}
.my-label > label:after {
  content: ":";
}

<div class="my-label">
  <label>Not required</label>
  <input type="text" />
</div>
<div class="my-label required">
  <label>Required</label>
  <input type="text" />
</div>

缺点

这种方法没有太多缺点，因为它应该适用于大多数浏览器（甚至是较旧的浏览器）。

【讨论】：

我最终做了类似的事情。我在用于模型显示名称的“LabelFor”之后创建了一个简单的标签。该标签包含一个红色星号。我把这两个放在一个弹性盒子里，它似乎工作得很好。感谢您的帮助！
没问题。很高兴我能帮上忙。

【解决方案2】：

正如 cmets 中所说，为什么不将 : 添加到 label 本身，因为它属于内容？

然后你可以有一个简单的::after 和color:red

当事情很简单时，为什么要复杂。

.required::after {
  color: red;
  content: "*";
}

<div>
  <label>Not required:</label>
  <input type="text" />
  <label class="required">Required:</label>
  <input type="text" />
</div>

【讨论】：

【解决方案3】：

使用 Hidden Hobbes 建议的标记，作为 flexbox 的替代方案，您可以使用相对定位和绝对定位的组合将星号放置在所需位置。

这种方法可能需要进行一些调整才能使水平和垂直位置恰好适合所使用的字体。

.my-label > label {
  display: inline-block;
  position: relative;
}
.my-label.required > label {
  padding-right: 1em;
}
.my-label.required > label:before {
  color: red;
  content: "*";
  position: absolute;
  top: 0.1em;
  right: 0.25em;
}
.my-label > label:after {
  content: ":";
}

<div class="my-label">
  <label>Not required</label>
  <input type="text" />
</div>
<div class="my-label required">
  <label>Required</label>
  <input type="text" />
</div>

【讨论】：