如何像密码一样在文本上加星号，但显示几个字母

Question

我想让用户名像密码一样被覆盖，但要显示1到2个字母。我附上了我在图片中的意思当我希望它被揭露时，我的意思是什么我所说的像密码一样被覆盖的例子

这是我为.css和.html中的两个框编写的代码，它们在课程的正文中

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>

编辑：css 中的p2

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;
}

Answer 1

您可以使用"伪"；css类，如"之后的"和替换内容的span。

你需要一个单格字体，以保持宽度在同一水平上。

<div class="replace_by_char">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: "***";
}