如何使用 ::after 伪元素为一种样式设置两种字体颜色？

Question

我目前正在做一个 ASP.NET MVC web 项目，对于我们的一些表单，我们有需要填写的字段。我想做的是添加一个样式，添加一个红色星号 (*) 后跟一个黑色冒号 (:)，在每个必填字段的每个标签之后。

目前，对于页面的样式，我们正在使用 LESS CSS，并且还在使用 bootstrap。我们所有的标签都有 bootstrap class "control-label"，它在标签 html.

之后添加了一个黑色冒号

我想制作 class "required" 并向其添加 ::after 伪元素，将星号添加到内容属性中，如下所示：

// Add a red asterisk (*) after each label which is required.
label.control-label.required::after{ 
    content: "*";
    color: red;
}

但是，这会覆盖 bootstrap 样式，从而删除我需要的黑色冒号。

我可以使用下面的，但是冒号也会变成红色。

// Add a red asterix (*) after each label which is required.
label.control-label.required::after{ 
    content: "*:";
    color: red;
}

有没有办法让星号变成红色，冒号变成黑色？

我试过使用多个

// Add a red asterix (*) after each label that's required.
label.control-label.required::after{
    content: "*";
    color: red;
}
// Add a red colon (:) after each label that's required.
label.control-label.required::after{
    content: ":";
    color: black;
}

但是这里最后一个样式会覆盖第一个样式，只显示黑色冒号。

Using less，当您想使用多个 ::after 函数时，他们还建议使用 ::after(2)，但这也不起作用。

// Add a red asterix (*) after each label that's required.
label.control-label.required::after(2){
    content: "*";
    color: red;
}
// Add a red colon (:) after each label that's required.
label.control-label.required::after(2){
    content: ":";
    color: black;
}

使用 ::after(2)（或任何其他数字组合作为参数），将使用默认 bootstrap 样式，并且只会显示黑色冒号。

向内容属性添加 HTML 代码也不起作用，因为内容属性会按字面意义（作为字符串）获取代码。

如果我可以在一种风格中使用两种颜色，那

如有任何帮助，我们将不胜感激。如果您还有其他问题，请随时提问，我会尽力解答。

Answer 1

当您无法更改所有表单字段的来源并为此添加额外的元素时，一个机会是使用 ::before 和 ::after 并根据需要更改显示方向影响。

label.control-label
{
  display: flex;
}

label.control-label::before
{
  content: ':';
  order: 2;
}

label.control-label.required::after
{
   content: '*';
   color: red;
   order: 1;
}

<label class="control-label">Just a label</label>
<label class="control-label required">Required label</label>

您可以使用 flex 或 inline-flex，具体取决于您的使用情况。

Answer 2

恐怕只有 CSS（没有黑客）这是不可能的。

您可以使用这个 JavaScript 来解决您的问题：

let labels = document.querySelectorAll('label.control-label.required');

labels.forEach(label => {
    label.innerHTML += '<span style="color:red;">*</span><span style="color:black;">:</span>';
});

如何使用 ::after 伪元素为一种样式设置两种字体颜色？

How do you have two font colors for a single style using the ::after pseudo-element?

html

css

less