Pedram Marandi Pedram Marandi - 3 months ago 18
CSS Question

Change specific character color in whole of the text

There is a problem with a text which I want to change the colour of some characters like all of the stars.

My text is something like this:

<p> Pedram Marandi * is a developer * He works at Foolanja. </p>


I want to change the colour of * to red.

I've tried this code:

p:after {
content: '*';
color: red;
}


But it seems this code will add a star after my p tag.
How can I do this ? is it possible with only CSS ?

Answer

It's not possible with css only, but you can use javascript for that. For example:

Array.prototype.forEach.call(document.getElementsByTagName("p"), function(el) {
  el.innerHTML = el.innerHTML.replace(/\*/g, "<span class='color-red'>*</span>");
});
.color-red {
  color: red;
}
<p>Pedram Marandi * is a developer * He works at Foolanja.</p>