テキスト全体で特定の文字色を変更する

Question

すべての星のように一部の文字の色を変更したいテキストに問題があります。

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

私は赤に*の色を変更したい：

私のテキストは、このようなものです。

私はこのコードを試してみた：

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

をしかし、このコードは私のpタグの後にスターを追加しますようです。 どうすればいいですか？ CSSだけで可能ですか？

Answer 1

それが唯一のcssでは不可能ですが、あなたはそのためにJavaScriptを使用することができます。たとえば：

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>

Answer 2

特定のCSSクラスを持つ星に特定のタグを追加することで実現できます。

HTML：

<p> Pedram Marandi <i class="star">*</i> is a developer <i class="star">*</i> He works at Foolanja. </p> 

CSS：

.star {color:red;}