CSS伪类与伪元素怎么用？hover、before、after实战做出网页交互效果

学 CSS 不能只会写颜色和宽度，想让网页有交互感，伪类与伪元素是必学。很多新手看到 a:hover 变色、列表前面自动加小图标、按钮角标自动出现，以为要写很多 JS，其实纯 CSS 就能搞定。今天老陈把最常用的一对——伪类和伪元素讲明白，照例子写一遍你就会。

一、伪类和伪元素分别是什么

简单记：伪类管状态，伪元素造零件。伪类是用来选中元素的某种状态，比如鼠标移上去、链接被点过、输入框获得焦点，写法是在选择器后面加一个冒号，例如 a:hover。伪元素是用来给元素额外生成一块内容或位置，比如元素前面、后面插一段文字或图形，写法是两个冒号，例如 p::before。一个冒号和两个冒号，别混。

二、伪类实战：hover 做交互

最常见的是 :hover，鼠标移上去才生效。看一段按钮代码：

先写 .btn { background: #888; color: #fff; padding: 8px 16px; }，再写 .btn:hover { background: #e4393c; }。鼠标一移上去，背景就从灰变红，完全不用 JS。同理 :focus 可以让输入框获得焦点时高亮边框，提示用户正在输入。

三、伪元素实战：before 和 after

::before 在元素内容前面插入，::after 在后面插入，常配合 content 属性使用。比如给每段提示前面加个标签：

写 p.tip::before { content: '提示：'; color: #e4393c; font-weight: bold; }，页面里所有带 tip 类的段落，文字前会自动出现红色提示：二字，不用你手写。再比如用 ::after 给外链后面加个小箭头，一眼区分站内站外。

四、组合使用更出彩

伪类和伪元素能叠着用。例如导航菜单：正常是灰色，鼠标移上去变红，同时前面冒出一个小圆点，代码就是 .nav a:hover::before { content: ''; ... }。状态和装饰一起上，交互感就出来了。

五、新手避坑

• ::before 和 ::after 必须有 content 属性，哪怕写 content: ''; 空着也得写，否则不显示。
• 伪元素默认是行内元素，想设宽高要先写 display: block 或 inline-block。
• 一个冒号还是两个冒号别写错，新写法推荐双冒号，老浏览器兼容可用单冒号。
• 别用伪元素放真正重要的内容，它不被所有爬虫和复制工具识别，关键信息还是写进正文。

老陈总结

伪类管状态、伪元素造零件，记住这个分工就不乱。hover 做交互、before/after 做装饰，两者组合能省掉大量 JS。建议你打开编辑器，照着上面的按钮变色和提示标签各写一遍，再给自己的导航加个悬停效果。动手改改颜色和内容，比看十遍记得牢。想系统学前端，可以看老陈的系统课程，或评论区留言发链接给你。