css伪元素

1、定义

伪元素，顾名思义，就是虚假的元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。优点是可以减少dom元素，缺点是伪元素的结构无法审查，不方便调试。

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	选择用户选择的元素部分。

注：content是伪元素的特有属性，必须要写，否则的话不会生效，且伪元素默认是inline，但可以用display属性来调整。

3、使用场景

1、content属性的值可以是字符串，如果没有内容也要写空串。
示例：清除浮动

    
    
环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字环绕的文字

.box:after{
    content: '';
    display: block;
    clear: both;
    *zoom: 1;/* IE6-7不支持:after需触发hasLayout */
}

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

    我们有一些 文字 有一些
            提示。

            把鼠标放上去看看.

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(), 插入一个外部资源文件，可以是图像，音频，视频文件或浏览器所支持的其他任何资源。

被插入图片的文字
.insert::before {
    content: url(../images/bg2.jpg);
    width: 100px;
    height: 60px;
    display: inline-block;
}

效果：

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

    
part
    
part

.container {counter-reset:section;}
h2:before { 
    counter-increment: section; 
    content: "Chapter"  counter(section) ".";
} 

效果：

4、兼容性

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

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