html label:after 内容需要在文本中使用不同的颜色

Question

我设置了模型属性的显示名称，但我需要它们在不需要时用冒号显示，在需要时用冒号和红色星号显示。

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

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

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

但是，如果该字段是必需的，我无法弄清楚如何在之后显示一个红色星号。

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

欢迎提出任何更好的处理方法的建议。

Answer 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，您可以 "reserve" space 这样文本就不会重叠。

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

缺点

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

Answer 2

如评论中所述，为什么不将 : 添加到 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>

Answer 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>

html label:after 内容需要在文本中使用不同的颜色

html label:after content needs to have different colors in the text

html

css

pseudo-class

问题

解决方案 1

缺点

解决方案 2

缺点