How to replace ^foo by ^bar in a CSS tag?

Question

How to replace ^foo by ^bar in a CSS tag ?

For instance, I have <p>foo Hello World!</p>, is it possible to replace it by <p>bar Hello World!</p> using CSS only (without javascript) ?

What I'd like is actually to automatically replace the first line by the second one, becoming → :

<p>  Hello World!</p>
<p>→ Hello World!</p>

With the arrow → set like this:

{
  content: "→ ";
  font-weight: bold;
  font-size: 1em;
  color:#DD4C4F;
  font-family: sans-serif;
}

" For instance, I have
foo Hello World!
, is it possible to replace it by
bar Hello World!
using CSS " what would be the trigger for the change? — Emmanuel Neni, Oct 08 '20 at 10:26
@Emm Actually, I was thinking about `text-replace` property, but it doesn't exist. I guess I should remove this post then. — DevonDahon, Oct 08 '20 at 10:28
To my knowledge you can not replace a part of the text purely with css (the shown solutions here only prepend text to your element). That being said you can ["replace" the whole text using css](https://stackoverflow.com/questions/7896402/how-can-i-replace-text-with-css). — Lapskaus, Oct 08 '20 at 10:31

score 0 · Answer 1 · answered Oct 08 '20 at 10:15

Try putting the element selector before the class. Also, remember that a space between the element and class means that the element contains the class. You probably want the element with the class.

Example:

p.text::before {
  content: "→ ";
  font-weight: bold;
  font-size: 1em;
  color: #DD4C4F;
  font-family: sans-serif;
}

<p class="text">
  Hello World
</p>

score 0 · Answer 2 · answered Oct 08 '20 at 10:27

.my-class p::before {
  content: "→ ";
  font-weight: bold;
  font-size: 1em;
  color:#DD4C4F;
  font-family: sans-serif;
}

.my-class-using-hover p::before {
  content: " ";
  font-weight: bold;
  font-size: 1em;
  color:#DD4C4F;
  font-family: sans-serif;
}

.my-class-using-hover p:hover::before {
  content: "→ ";
  font-weight: bold;
  font-size: 1em;
  color:#DD4C4F;
  font-family: sans-serif;
}

<div class="my-class-using-hover">
  <p>Hover on me!</p>
</div>

<div class="my-class">
  <p>Hello World!</p>
</div>

How to replace ^foo by ^bar in a CSS tag?

2 Answers2