利用CSS的:focus与::after伪元素可实现输入框聚焦时的提示效果；2. 推荐使用父容器结合:focus-within与::after显示提示内容；3. 也可通过相邻兄弟选择器使聚焦后兄弟元素显示提示；4. 注意定位、层级及移动端适配，复杂场景仍需JavaScript。

当用户点击输入框时，我们常需要显示一些辅助提示信息。利用CSS的 :focus 和 ::after 伪元素，可以不借助JavaScript实现简单的视觉提示效果。

基本原理：:focus 与 ::after 的结合

:focus 是一个动态伪类，用于选中获得焦点的表单元素（比如 input）。::after 是一个伪元素，可在元素内容后插入装饰性内容。虽然 ::after 不能直接添加在表单控件上显示内容（因为 input 不支持子元素），但我们可以通过给 input 的父容器使用 ::after 来绕过这个限制。

常见做法是将 input 包裹在一个容器内，在容器上使用 :focus-within 或对 input 使用 :focus 配合相邻兄弟选择器来触发提示。

方法一：使用父容器 + :focus-within + ::after

这是最推荐的方式，语义清晰且兼容性良好（现代浏览器支持）。

立即学习“前端免费学习笔记（深入）”；

seo-keyword-analyzer

分析关键词进行SEO优化；研究搜索量、竞争程度和排名难度；生成关键词建议、内容创意及优化建议。

下载

• 用一个 div 包裹 input
• 对 div 使用 :focus-within 判断内部是否有元素聚焦
• 通过 ::after 显示提示文本或图标

示例代码：

<div class="input-tip-container">
  <input type="text" placeholder="请输入用户名">
</div>

方法二：使用相邻兄弟选择器 + :focus + ::after

如果提示信息放在 input 后面的另一个元素中（如 span），可通过 :focus + ::after 控制其显示。

• input 获得焦点时，触发其后的兄弟元素显示
• 用 ::after 添加提示内容
• 初始状态隐藏，聚焦时显示

示例代码：

<div>
  <input type="password" id="pwd">
  <span class="tip-span"></span>
</div>

注意事项与优化建议

这类纯CSS提示适合轻量级交互，但有几点需要注意：

• ::after 只能用于支持伪元素的容器，input[type=text] 本身无法使用 ::after 插入内容
• 提示位置建议用绝对定位控制，避免影响布局
• 移动端注意气泡是否被遮挡，可加 z-index 提高层级
• 对于复杂提示（如多行、按钮），仍建议使用 JavaScript 控制显隐

基本上就这些，不复杂但容易忽略细节。合理使用 :focus 和 ::after，可以在不增加JS的情况下提升表单的可用性。