css伪元素

1、定义和特性

定义：

伪元素，顾名思义，就是虚假的元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

特性：

1、可以减少dom元素；
2、必须配合content属性一起使用，否则不会生效，且伪元素默认是inline，但可以用display属性来调整；
3、结构无法审查，不方便调试；
4、js无法操作，增加、删除等。

2、分不清:还是::?

在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。
在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

3、CSS 伪元素

选择器	例子	例子描述
::after	p::after	在每个元素之后插入内容。
::before	p::before	在每个元素之前插入内容。
::first-letter	p::first-letter	选择每个元素的首字母。
::first-line	p::first-line	选择每个元素的首行。
::selection	p::selection	选择用户选择的元素部分。

3、使用场景

1、content：''，如果没有内容也要写空串。
示例：清除浮动

<div class="box">
    <div class="son1"></div>
    <div class="son2"></div>
</div>
.box:after{
    content: '';
    display: block;
    clear: both;
    *zoom: 1;/* IE6-7不支持:after需触发hasLayout */
}

2、content：attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值
示例：词汇提示工具

<p>
    我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
            <span data-descr="small popups which also hide again">提示</span>。<br />
            把鼠标放上去<span data-descr="not to be taken literally">看看</span>.
</p>
span[data-descr] {
    position: relative;
    text-decoration: underline;
    color: #00F;
    cursor: help;
}

span[data-descr]:hover::after {
    content: attr(data-descr);
    position: absolute;
    left: 0;
    top: 24px;
    min-width: 200px;
    border: 1px #aaaaaa solid;
    border-radius: 10px;
    background-color: #ffffcc;
    padding: 12px;
    color: #000000;
    font-size: 14px;
    z-index: 1;
}

3、content：url()/uri(), 插入一个外部资源文件，可以是图像，音频，视频文件或浏览器所支持的其他任何资源。

<div class="insert">12</div>
.insert {
   line-height: 20px;
}
.insert::before {
    content: url(../images/headset.png);
    width: 24px;
    height: 20px;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

效果：

4、content：counter(name)调用计数器，可以不使用列表元素实现序号功能
先来了解一下counter-reset、counter-increment和counter属性。

counter-reset：计数器名称初始值；创建或重置一个或多个计数器，初始值默认为0。
counter-increment：计数器名称增量值；设置某个选取器每次出现的计数器增量。增量值默认为1。
counter(计数器名称，style)；必须和content一起使用，给元素插入计数器的值。
style参数是用来定义计数器的风格，默认为数字，还可以是lower-roman、lower-alpha、lower-greek罗马、英文、希腊等字符。

<div class="container">
    <h2>part</h2>
    <h2>part</h2>
</div>
.container {counter-reset:section;}
h2:before { 
    counter-increment: section; 
    content: "Chapter"  counter(section) ".";
} 
</style>

效果：

4、兼容性

总体来说大部分浏览器的支持性还是很好的，所以放心大胆的用吧～

5、和伪类的区别

1、写法不同，伪类只能用单冒号，而伪元素单冒号跟双冒号都可；
2、一个本质上是元素，另一个本质上是类；
2、伪类是用于向某些选择器添加特殊的效果，首先这个元素得是存在的，而伪元素是添加一个新的dom元素，顺便带着一些样式。

参考文档
https://www.cnblogs.com/wonyu...
https://blog.csdn.net/csdn372...
https://www.zhangxinxu.com/wo...