单纯使用CSS实现动态提示信息

下面是单纯使用CSS实现动态提示信息的完整攻略。

确认需求

在开始操作前，首先需要搞清楚需求，即我们需要在页面中添加的动态提示信息是怎样的。以各种表单为例，常见需求有以下几种：

1. 输入框为空时，显示“请输入内容”或其他类似提示
2. 输入框字符数量不足时，显示“至少输入x个字符”的提示
3. 输入框字符数量超过限制时，显示“超出最大字符数”的提示
4. 输入内容格式不正确时，显示“请输入正确的格式”或其他类似提示

确认完需求后，就可以开始编写CSS样式了。

编写CSS样式

使用:empty伪类

对于第一种需求，我们可以使用:empty伪类来实现。:empty伪类选择器匹配没有任何子级的元素，因此可以用来判断特定元素是否为空。代码如下：

input:empty::before {
  content: '请输入内容';
  color: red;
}

这段代码的意思是：当输入框为空时，在输入框前面添加一个文本节点，并设置颜色为红色，文本内容为“请输入内容”。

使用:valid和:invalid伪类

对于第二、三、四种需求，我们可以使用:valid和:invalid伪类来实现。:valid和:invalid伪类选择器匹配表单控件中根据类型(validation)和pattern属性所进行的表单验证的结果。因此，我们可以为表单输入框设置pattern属性，然后根据:valid和:invalid伪类分别添加样式。

以手机号码输入为例，以下代码实现在输入框未输入手机号时提示“请输入手机号”，在输入不符合校验规则的手机号时提示“请输入正确的手机号”，在输入符合校验规则的手机号时去掉提示信息。

input[type="tel"]:not(:focus):not(:valid)::before {
  content: '请输入手机号';
  color: red;
}

input[type="tel"]:not(:focus):invalid::before {
  content: '请输入正确的手机号';
  color: red;
}

使用:checked伪类

除了input控件外，checkbox和radio控件也可以使用::before和::after伪元素来实现提示信息。当使用input:checked选择器时，当选框被选中时，:before伪元素中的内容将会出现。

以下示例实现了选择一个项目时弹出一个提示框：

<input type="radio" id="radio">
<label for="radio">点我</label>
<div class="tip"></div>

#radio:checked~.tip::before {
  content: '已选中';
}

通过这个例子，我们可以发现，当使用:checked伪类时需要使用兄弟选择器~来选取下一个元素。

技巧小结

以上就是通过::before和伪类来实现动态提示的方法，其中需要使用到的伪类有：:empty，:valid和:invalid，:checked。另外，使用~和+兄弟选择器也可以辅助我们选择元素。我们可以根据具体的需求来应用这些技巧来实现更加灵活的提示信息。

另外，注意到以上示例代码中，我们使用了CSS中的::before伪元素来添加提示信息。这里值得注意的是，在使用伪元素时，应当将其content属性设置为一些文本节点，这些文本节点才能够被显示出来。