How to asterisks the text like a password but show a couple letters?-CodePudding

I want to make the username covered like a password is, but to be revealed 1 or 2 letters. I attached what i mean in images what i mean when i want it to be revealed example of what i mean by covered like password

Here is my code for the 2 boxes from .css and .html, they are in body ofcourse

input[type="text"] {
  color: #000;
}

input[type="password"] {
  color: #000;
}

input {
  width: 40%;
  height: 30px;
  position: relative;
  top: -4px;
  font-size: 20px;
  padding: 0 .3em;
  color: #555555;
}

<p2>
  <label for="name">Username </label>
  <input type="text" name="username" />
</p2>

<p2>
  <label for="pwd">Password </label>
  <input type="password" name="pwd" />
</p2>

edit: p2 in css


p2{
    position: relative;
    left: -65px;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    text-align: center;
    }

CodePudding user response：

You can try it with "pseudo" css classes, like `:after`` and span for the replaced content.

You need a monospace font, to keep the width on the same level.

<div >H<span>ell</span>o World</div>

.replace_by_char span{
  color: red;
  visibility: hidden;
  position: relative;
  font-family: monospace;
}

.replace_by_char span:after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: "***";
}