DEV Community

Discussion on: Daily Challenge #32 - Hide Phone Numbers

Collapse
 
alvaromontoro profile image
Alvaro Montoro

CSS

.hide-phone-number {
  display: inline-block;
  font-family: monospace, monospace;
  position: relative;
}

.hide-phone-number::after {
  content: "XX-XXXX";
  background: white;
  position: absolute;
  right: 0;
}
Enter fullscreen mode Exit fullscreen mode

Another trickery with CSS: with no prechecks and assuming the phone number is valid, add the class "hide-phone-number" to the element and the last six digit will turn into Xs.

Collapse
 
wheatup profile image
Hao

Outstanding move

Collapse
 
ajinspiro profile image
Arun Kumar

CSS assassin spotted

Collapse
 
erebos-manannan profile image
Erebos Manannán

Ah, this is like people making the text background black on PDF documents and being surprised when people can still just copy & paste the original contents out of the "redacted" document.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

It's exactly that :P