• 伪类：用于选择处于 特定状态 的元素，比如鼠标悬浮状态（ :hover ）。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
• 伪元素：以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，产生的效果是把不存在的元素硬选出来

区别

表现方式区别：

伪类表现的是某种状态被选择出来，例如 :hover 、 :checked ，而伪元素表现的是选择元素的某个部分，使这部分看起来像一个独立的元素，其实并不是，例如 ::before 、 ::after

抽象的说，伪类就是选择元素某状态，伪元素就是创建一个 HTML 元素

符号区别

伪类使用单冒号 : ，伪元素开头为双冒号 :: ，单需要注意的是 CSS3 之前并没有定义伪元素，都统称为伪类，所以目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素

常见的伪元素和伪类

::before 与 ::after

接下来我们说说最常用、最经典的 ::before 和 ::after 伪元素， ::before 表示在元素内容之前插入一个虚拟的元素， ::after 则表示在元素内容之后插入，并且 ::before 和 ::after 中支持所有的 CSS 属性。

但需要注意的是这两个伪元素所在的 CSS 规则必须指定 content 属性才会生效

content 属性

content 可取 string、attr()、url()/uri()：

attr()

<a href="https://github.com/Advanced-Frontend/Daily-Interview-Question">
  ❤️三分钟学前端❤️
</a>
<style>
  a::after {
    content: " → " attr(href); /* 在 href 前显示一个箭头 */
  }
</style>