伪元素与伪类两者都是通过在选择器后附加一个特定的关键字来定义，遵循相似的语法规则，并在 CSS 规则块中设置相应的样式。伪元素 能够通过 content 属性添加或替换内容。例如，:before 和 :after 可以插入文本、图像或其他生成的内容。伪类 仅影响元素的样式，而不添加或修改内容。它们基于用户的交互、文档结构或其他逻辑条件来改变元素的表现。主要区别如下：
作用对象：
- 伪类选择器（Pseudo-classes）作用于实际存在的元素，用于描述元素的某种特定状态或关系，如链接的访问状态（
:visited）、鼠标悬停状态（:hover）、是否为文档中的第一个子元素（:first-child）等。它们不直接改变元素的结构，而是影响元素在特定条件下的表现样式。 - 伪元素选择器（Pseudo-elements）则用于创建并选择元素内的某个特定部分或是在元素前后生成新的、虚拟的内容节点。例如，
:before和:after可以用来插入额外内容，:first-line和:first-letter分别选择元素首行文本和首字母，:marker控制列表项标记样式等。这些伪元素并不对应于HTML文档中的实际元素，但可以对其应用样式，如同它们是真实存在的部分一样。
语法标识：
- 伪类通常使用一个冒号（
:）进行标识，如:hover、:focus。 - 伪元素在 CSS3 中使用两个连续的冒号（
::）进行标识，以区分于旧版 CSS 中的伪类。尽管大多数现代浏览器仍接受单冒号表示伪元素（如:before），但为了符合 W3C 标准和保持最佳实践，建议使用双冒号形式，如::before、::after。
可复用性：
- 伪类可以在同一选择器中组合使用，如
a:hover:focus表示同时处于悬停和聚焦状态的链接。 - 伪元素由于代表了元素内部的特定部分或生成的新内容，一般不能在同一选择器中重复出现。一个元素在同一时刻只能有一个
:before或:after伪元素生效。
一、CSS3 伪元素选择器详解与应用实例
CSS3 伪元素是一种特殊的 CSS 选择器，它们允许开发者在不修改 HTML 结构的前提下，通过 CSS 为元素添加或修改特定部分的样式，或者在元素内部或外部生成并控制虚拟内容。以下是对几种常见 CSS3 伪元素的详解以及应用实例：
1、:before和 :after
:before和 :after伪元素分别在所选元素的内容区域之后创建一个新的、无内容的、不可见的子元素。然后，通过给这个伪元素设置样式（如内容、尺寸、颜色、背景等），使其变为可见，并在视觉上表现为紧随原元素内容之后的部分。这些内容由 content属性定义，并且可以应用其他样式。
语法：
selector:before {
content: "..." /* 或其他值 */;
/* 其他样式声明 */
}
selector:after {
content: "..." /* 或其他值 */;
/* 其他样式声明 */
}
其中，content属性是定义伪元素生成内容的关键。它可以接受以下几种值：
- 字符串：直接指定要显示的文字。
- 引号包围的HTML实体：如
content: —;（破折号）。 - URL：插入图片资源，如
content: url(image.png);。 - 生成内容关键字：如
content: counter(name);（计数器）或content: attr(attribute-name);（获取元素属性值）。
应用实例：
1.1. 添加装饰性内容
添加引号、图标或其他装饰性元素。
添加引号：
blockquote:before {
content: open-quote;
font-size: larger;
color: #666;
}
blockquote:after {
content: close-quote;
}
在列表项前/后添加自定义图标：
li:before {
content: url(icon-checkmark.svg);
margin-right: 0.5em;
}
li.completed:after {
content: "2713"; /* Unicode 字符：对勾 */
color: green;
font-size: 1.5em;
vertical-align: super;
}
1.2. 清除浮动
:after常用于创建一个空的块级元素，配合 clear:both来清除浮动对后续元素的影响，避免高度塌陷问题。
.clearfix:after {
content: "";
display: table;
clear: both;
}
将 .clearfix类应用于需要清除内部浮动的容器元素。
1.3. 替代或扩展HTML内容
利用 attr()函数，可以从元素的属性中提取值作为 :after的内容，实现动态文本展示。
abbr[title]:after {
content: " (" attr(title) ")";
font-size: smaller;
color: gray;
}
此例中，当鼠标悬停在带有 title属性的 abbr元素上时，会显示一个包含 title属性值的小字号灰色括注内容。
1.4. 实现复杂形状与动画
结合 content、background、border等属性以及CSS3的 transform、transition或 animation，可以使用 :after创建复杂的形状和动画效果。
.button:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: ⅓em solid transparent;
border-right: ⅓em solid transparent;
border-bottom: ⅓em solid #007BFF;
border-left: ⅓em solid transparent;
margin-left: 0.½em;
}
.button:hover:after {
transform: translateY(-0.1em);
transition: transform 0.2s ease-in-out;
}