Html 如何使用：：after伪元素为单个样式提供两种字体颜色？

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

目前，对于页面样式，我们使用较少的CSS，也使用引导。我们所有的标签都有引导类“control label”，它在标签html之后添加了一个黑色冒号

我想将类设为“required”，并向其中添加：：after伪元素，将星号添加到内容属性中，如下所示：

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

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

我可以使用以下命令，但冒号也将显示为红色

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

但在这里，最后一个样式将覆盖第一个样式，并且只显示黑色冒号

使用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）（或任何其他数字组合作为参数），将使用默认引导样式，并且只显示黑色冒号

将HTML代码添加到content属性也不起作用，因为content属性会将代码按字面意思（作为字符串）表示

如果我能在一个样式中使用两种颜色，那么

---

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

当您无法更改所有表单字段的源代码并为此目的附加额外元素时，您可以使用

：：before

和

：：after

并更改显示方向以获得所需效果

label.control-label
{
显示器：flex；
}
label.control label:：before
{
内容:'：'；
顺序：2；
}
label.control label.required:：after
{
内容：“*”；
颜色：红色；
顺序：1；
}

只是一个标签
所需标签

恐怕仅使用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>';
});

let labels=document.querySelectorAll（'label.control label.required'）；
labels.forEach（label=>{
label.innerHTML+='*：'；
});

谢谢您的帮助。我已经使用了你所说的，它适用于必需的标签，但是现在所有非必需的标签都有两个黑色冒号。我所做的是添加以下内容：

label.controllabel:not（.required）：:after{content:；}

很高兴它有帮助。似乎您仍然有一个css片段，用于设置伪元素的内容。正如您在上面的代码中看到的，默认标签没有两个冒号。祝你好运。