1. 伪元素概念
CSS 在渲染文档的时候，伪元素可以通过 css 给 HTML 添加一个元素（叫标签也行），这个元素在文档树中是找不到的。伪元素被当做 CSS 的样式来进行展现，用法和普通的元素用法是一样的。
2. 伪元素特点
优点：
- 不占用 DOM 节点，减少 DOM 节点数。
- 让 CSS 帮助解决了一部分 JavaScript 问题，简化了开发。
- 避免增加毫无意义的页面元素。
缺点：
- 不利于调试。
- 伪元素不真正在文档内容中体现，只在视觉效果上体现，所以不能给伪元素添加具有实际意义的内容，这部分内容不会搜索引擎抓取。
3. 伪元素类型
注意：根据W3C规范，不考虑兼容IE8及以下版本浏览器的情况下，伪类使用单冒号（如:hover,:visited），伪元素使用双冒号
3.1 ::before和::after
::before和::after在被选中元素里面、元素现有内容之前（后）插入内容，需要使用content属性指定要插入的内容。
该内容默认不脱离文档流，占据实际元素空间。可通过定位实现与选中元素的绝对定位
特点：
- 默认display: inline；
- 必须设置content属性，否则一切都是无用功；
- 默认user-select: none，::before和::after的内容无法被用户通过鼠标长按滑动选中的；
- 会继承原本元素的CSS属性（如原元素的颜色等）
<div>大家好，我是div</div>div{
color:red
}
div::before{
content:"我是 before";
}
div::after{
content:"我是 after";
}
应用场景：
::before和::after常被用来和content属性配合实现各种辅助效果，以下是几种典型场景
（1）清除浮动带来的影响（解决高度塌陷问题）
.clear::after{
clear: both;
content:'';
display: block;
}将clear类添加到浮动元素的父元素（注意此方法适用该父元素的子元素必须都是浮动元素，如果掺杂非浮动元素，浮动影响不会完全清理）上，则会清除浮动带来的影响。这样不必再新建一个标签去清除浮动
（2）配合@font-face实现字体图标
（3）实现图片生成
利用content属性的url()功能生成图片，示例：
a::before{
content: url("https://www.google.com/logos/doodles/2018/world-cup-2018-day-19-6211393811382272.3-law.gif");
}实际项目中，通过url()方法实现图片生成的并不多，主要因为这种方式对图片的尺寸不好控制，设置宽高无法改变图片的固有尺寸。通常更多地是通过background-image属性来模拟
div::before{
content:"";
background-image: url("test1.jpg");
display: inline-block;
width: 100px;
height: 100px;
}（4）实现计数器
通过content属性的counter()方法，可以不使用列表元素实现序号功能。
counter 要配合 counter-increment 和 counter-reset属性使用。
counter-reset 给同级元素增加计数器，比如一个页面有多个H1元素，那就给body加计数器。一个H1元素里面有多个H2元素，那就给H1元素加计数器。
counter-increment 增加计数器数值。
示例：
<body>
<h1>哺乳动物</h1>
<h2>狗</h2>
<h2>猴子</h2>
<h2>猩猩</h2>
<h1>冷血动物</h1>
<h2>鱼</h2>
<h2>蛇</h2>
</body>body{
counter-reset: section;
}
h1{
counter-reset:subsection;
}
h1::before{
counter-increment: section;
content:counter(section)'、';
}
h2:before{
counter-increment: subsection;
content: counter(section)'.'counter(subsection)'、';
}
3.2 ::first-line和::first-letter
::first-line：只能用于块级元素。用于设置附属元素的第一个行内容的样式。可用的CSS属性为font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear。
:first-letter：只能用于块级元素。用于设置附属元素的第一个字母的样式。可用的CSS属性为font,color,background,marin,padding,border,text-decoration,vertical-align,text-transform,line-height,float,clear。
这两种伪类适用频率较低。
3.3 ::selection
::selection：匹配鼠标长按拖动选中的内容。可用的CSS属性为background,color
<span>士大夫士大夫胜多负少</span>
span::selection{
color: red;
}
3.4 ::placeholder
::selection：用于设置input元素的placeholder内容的样式。
input::placeholder {
color: red;
font-size: 1.2em;
font-style: italic;
}
注意：::placeholder伪元素尚未得到IE和Edge浏览器的支持
