Edit colour of text within CSS content

Question

I would like to change the color of some text but the text is in the CSS property 'content'. Is there a way to select specific words and colorize them?

For example here is the code I have .info:before { content: "PLEASE NOTE: this would be something that the user has to note... "; }

I would like to color the 'PLEASE NOTE' in red but keep the other text the same as the default color. Is this possible?

Answer 1

While you cannot format text in a pseudo element's content in the way you would like there are various ways of highlighting which may be helpful depending on your use case.

One I have used is to make the content monospaced and put a background color just on the characters that need to draw the user's attention. For example, this snippet puts yellow behind the 'Please note' words only:

.info:before {
  content: "PLEASE NOTE: this would be something that the user has to note... ";
  background-image: linear-gradient(to right, yellow 0, yellow 12ch, transparent 12ch, transparent 100%);
  font-family: monospace;
}

<div class="info">info div</div>

Another way which will give you the red characters you want is to use the text as a clipping mask and have the background red beneath the first two words and black otherwise:

.info:before {
  content: "PLEASE NOTE: this would be something that the user has to note... ";
  font-family: monospace;
  color: #000000;
  background-image: linear-gradient(to right, red 0, red 12ch, black 12ch, black 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    }
}

<div class="info">info div</div>

This gives you the look you want (if you can put up with monospace for the text of the content) but you'd have to check that the browsers you want to support are OK with clipping using text.

Answer 2

Wrap the text in a span tag so that you can give it it's own style.

If I have HTML like this:

<p class="info">NOTE: The stories and information posted here are artistic works of fiction and falsehood.</p>

And I want to highlight the substring "NOTE:", I will need to adjust my HTML like so:

<p class="info"><span>NOTE:</span> The stories and information posted here are artistic works of fiction and falsehood.</p>

And then I can use the following CSS to make it red:

p.info span {
    color:red
}