如何在输入字段中设置静态文本？

<label for="username">用户名:</label>
<input type="text" id="username" name="username">

<div class="input-container">
    <span>用户名:</span>
    <input type="text" id="username" name="username">
</div>

.input-container {
    display: flex;
    align-items: center;
}

.input-container span {
    margin-right: 10px;
}

<input type="text" id="username" name="username">

#username {
    padding-left: 50px; /* 为伪元素留出空间 */
}

#username::before {
    content: "用户名:";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.input-container {
    display: flex;
    align-items: center;
}

#username::before {
    content: "用户名:";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

body {
    font-family: Arial, sans-serif;
}

.input-container span {
    font-size: 16px;
}