CSS only: Replace all characters in
with the same character

Question

I have a <p class="hidden"></p> with some text in it. I want to replace all characters in the paragraph with the same character, e.g. a question mark. Note that this is not a viable solution since it requires to specify aprioristically the length of the new string:

.hidden {
  text-indent: -9999px;
  line-height: 0;
}

.hidden::after {
  content: "???";
}

As a way of example:

<p>Just some text!</p>
<p class="hidden">Hello, world!</p>

Should be rendered:

Just some text! 
?????????????

The only way that I can see that done using pure CSS is by specifying a font that only contains question mark glyphs. Trivial to do in JavaScript though. — Robby Cornelissen, Apr 19 '21 at 06:11
The only way to use `p = font-size : 0px` | `p:after = font-size : 12px`. This text will not be indexed by the search engine — Mohammad reza Golshahi, Apr 19 '21 at 06:24
Does this answer your question? [How to use CSS to replace or change text?](https://stackoverflow.com/questions/10212879/how-to-use-css-to-replace-or-change-text) — coderLMN, Apr 19 '21 at 06:25

score 0 · Accepted Answer · answered Apr 19 '21 at 14:40

One idea is to build your own font that contain only 1 character (the ? sign) and use it for your text.

I am not familiar with this but you can easily find a lot of tools to do it. I will simply give an example using a strange font to show you the idea:

@font-face {
 font-family: "Strange";
 src: url("https://css-challenges.com/ahem/dugun.regular.otf");
}


p {
  font-size:35px;
}

.hidden {
 font-family: "Strange";
}

<p>some text here</p>
<p class="hidden">some text here</p>

CSS only: Replace all characters in with the same character

1 Answers1

CSS only: Replace all characters in
with the same character