如何使用CSS伪类和伪元素创建交互式UI组件

用CSS伪类和伪元素，给你的UI组件“整容”

大家好，我是你们的UI老中医，今天咱们不聊高深莫测的框架，也不谈复杂的设计模式，就来聊聊CSS里的“美容圣品”——伪类和伪元素。有了它们，你的UI组件就能轻松拥有各种酷炫的交互效果，就像做了个微整形，颜值瞬间up！

啥是伪类和伪元素？别被“伪”字吓跑了！

先别一听“伪”字就觉得不正经。其实，伪类和伪元素都是CSS里的好同志，它们可以让你在不修改HTML结构的前提下，给元素添加样式。

• 伪类： 就像给元素添加了一个“状态标签”，根据这个状态来应用不同的样式。比如，鼠标悬停时的状态、链接被访问过的状态等等。常见的有 :hover、:active、:focus、:visited等等。你可以理解为：“当元素处于某种状态时，就应用这个样式”。

• 伪元素： 就像给元素“克隆”出了一个虚拟的子元素，你可以对这个虚拟元素进行样式设置。常见的有 ::before、::after、::first-line、::first-letter等等。你可以理解为：“在元素的内容之前/之后，创建一个虚拟的元素，并应用这个样式”。

为什么要用它们？因为它够“懒”够高效！

想象一下，如果你想在鼠标悬停时改变一个按钮的颜色，传统的做法可能是：</