CSS - replace part of content text

Question

Is there a way using pure CSS to replace part of content text, for example if the text is ABCDE -

<span class="replacer">ABCDE</span>

But instead of ABCDE the first 3 chars will be * so it will displayed as ***DE.

Hi, doing this in pure CSS is not a good option try using JS instead — user9674579
– user9674579, Commented May 8, 2018 at 10:57

Fabrizio Calderan · Accepted Answer · 2018-05-08 11:02:22Z

5

No, in pure CSS it's not possible to change the content, but you could cheat by overlapping something, e.g.

.replacer { 
  font-family: monospace; 
  position: relative; }

.replacer::before {
   background: #fff;
   position: absolute;
   content: "***";
}

Codepen demo

or, another tricky way could be creating and loading a special font that maps the symbols A, B and C into the asterisk sign (through the unicode-range property, https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range)

in javascript you would only need to replace the textContent property of the element

var el = document.getElementsByClassName('replacer')[0]
el.textContent = el.textContent.replace(/^.{3}/, '***');

edited May 8, 2018 at 11:02

answered May 8, 2018 at 10:40

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 5 · Accepted Answer · 2018-05-08 10:54:51Z

5

A solution which works as you want, try to take a look at it

.replacer {
  display: inline-block;
  position: relative;
  font-family:monospace;
  font-size:18px;
}

.replacer:before {
  content: attr(stars);
  background-color: #fff;
  position: absolute;
  left: 0;
}

<span stars="***" class="replacer">ABCDE</span>

To increase the number of stars in beginning, just change the stars attribute in html, similarly same can be done for .replacer::after, see example below

.replacer {
  display: inline-block;
  position: relative;
  font-family:monospace;
  font-size:18px;
}

.replacer:after {
  content: attr(stars);
  background-color: #fff;
  position: absolute;
  right : 0;
}

<span stars="***" class="replacer">ABCDE</span>

edited May 8, 2018 at 10:54

answered May 8, 2018 at 10:46

user9674579

5 Comments

Temani Afif Over a year ago

pay attention, your are not hiding 3 letter

user9674579 Over a year ago

The OP asked for ***DE, that's what this CSS does

Fabrizio Calderan Over a year ago

you need a monospaced font, I can still see the C in your example

user9674579 Over a year ago

@fcalderan I made my changes

Temani Afif Over a year ago

by the way don't need to change to after, simply change right/left since the element is position:absolute

Collectives™ on Stack Overflow

CSS - replace part of content text

2 Answers 2

Comments

A solution which works as you want, try to take a look at it

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

A solution which works as you want, try to take a look at it

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related