:before和::before的区别与相同点:before和::before都可以用来表示伪类对象,用来设置对象前面的

一. 相同点

都可以用来表示伪类对象,用来设置对象前面的内容
:before和::before写法是等效的
配合content属性一起使用
伪类对象不会出现在DOM中，不能通过js操作，仅在css渲染层加入

二.不同点

1.单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

2. :before的兼容性比::before好；

3. :before是CSS2的写法，::before是CSS3的写法

三.伪元素 ::before

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪元素</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: rgb(238, 28, 28);
    }

    /* ::before 在元素内容前面插入盒子 */
    .box::before {
      content: "简单点";

    }

    /* ::after在元素内容后面插入盒子 */
    .box::after {

      content: "递进";

    }

    /* 伪元素必须指定content属性
    伪元素插入的标签属于行内元素,设置宽高无效
    伪元素的权重和标签一样(0001)
    */
  </style>
</head>

<body>
  <div class="box">说话的方式简单点</div>
</body>

</html>

四.注意事项

1、伪类元素要配合content属性一起使用

2、伪类元素是css渲染层加入的，不能通过js来操作

3、伪类对象特效通常通过：hover伪类样式来激活

五.常见的伪类

伪类有：:first-child ，:link:，visited，:hover:，:active，:focus，:lang，:right，:left，:first

:link用在未访问的链接上。
:visited用在已经访问过的链接上。
:active用于获得焦点（比如，被点击）的链接上。
:hover 用于鼠标光标置于其上的链接。

六.伪元素种类

七.温馨提醒

如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。