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

Question

I'm currently working on a ASP.NET MVC web project, and for some of our forms, we have fields that are required to be filled in. What I want to do is add a style that adds a red asterisk (*) followed by a black colon (:) after each label for each field that's required.

Currently, for the styling of the pages, we're using LESS CSS and are also using bootstrap. All our labels have the bootstrap class "control-label", which adds a black colon after the label html.

I wanted to make the class "required" and add the the ::after pseudo-element to it, adding the asterisk to the content property like this:

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

However, this overrides the bootstrap style and thus remove the black colon that I require.

I can use the following, but than the colon will also be in red.

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

Is there a way to make it so the asterisk is in red, but the colon is in black?

I've tried using multiple

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

But here the last style will overwrite the first one and only the black colon will be shown.

Using less, they also suggest using ::after(2) for when you want to use multiple ::after functions, but this also doesn't work.

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

Using ::after(2) (or any other combination of numbers as parameter), the default bootstrap style would be used and only a black colon would be shown.

Adding HTML code to the content property also doesn't work because the content property would take the code literally (as string).

If I could use two colors in a single style, that

Any help would be greatly appreciated. If you have any more questions, feel free to ask and I'll do my best to answer them.

score 0 · Accepted Answer · answered Dec 05 '18 at 09:55

When you can not alter the source for all form fields and append an extra element for this purpose, one chance would be to use ::before and ::after and change the display direction for the desired effect.

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>

You can either use flex or inline-flex, depending on your use case.

Thank you for the help. I've used what you said and it works for the required labels, but now all non required labels have two black colons. What I did to fix this is adding the following: `label.control-label:not(.required)::after { content: ""; }` — Junius01, Dec 05 '18 at 10:09

score 0 · Answer 2 · answered Dec 05 '18 at 10:03

I'm afraid this is not possible with only CSS (without hacks).

You could use this JavaScript to solve your problem:

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

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

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

2 Answers2