利用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
这是最推荐的方式，语义清晰且兼容性良好（现代浏览器支持）。
- 用一个 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>
word" id="pwd">
注意事项与优化建议
这类纯CSS提示适合轻量级交互，但有几点需要注意：
- ::after 只能用于支持伪元素的容器，input[type=text] 本身无法使用 ::after 插入内容
- 提示位置建议用绝对定位控制，避免影响布局
- 移动端注意气泡是否被遮挡，可加 z-index 提高层级
- 对于复杂提示（如多行、按钮），仍建议使用 JavaScript 控制显隐
基本上就这些，不复杂但容易忽略细节。合理使用 :focus 和 ::after，可以在不增加JS的情况下提升表单的可用性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
