伪类::before_伪元素：：after 和：：before

伪元素before和after的功能

伪元素：：before是在选中元素中创建一个伪元素作为第一个子元素

伪元素：：after是在原种元素中创建一个伪元素作为最有一个子元素

CSS3中用：：表示，但是也兼容css2中的单冒号：

上述两种伪元素默认是行内元素，通过content来定义元素内容

定义元素内容为空，display为block

---

div::after{
    content:"";
    display:block;
}

对伪元素：：before的应用举例

<q>Some quotes,</q> he said, <q>are better than none.</q>

q::before { 
  content: "«";
  color: blue;
}

q::after { 
  content: "»";
  color: red;
}

伪类和伪元素的区别

伪类让你应用样式的元素不仅涉及到文档树的内容，而且还涉及到外部因素，如导航仪的历史（:visited等），其内容的状态（如:checked在某些表单元素）或鼠标的位置（如:hover，它可以让您知道鼠标是否在元素上）。

伪元素则恰恰相反，伪元素可用于设置元素的特定部分的样式。

文章主要参考MDN官网

::before (:before)​developer.mozilla.org