before，after，首个字符,首行和选中样式等伪元素的使用

伪元素种类有很多，这里说::before,::after,first-letter,first-line,::selection这几个。

1.::before：可以在元素的内容前面插入新内容。

div::before{
    /*必须添加content属性，否则后期不可见*/
    content: "";
    /*默认是行级元素，如果想设置宽高，就必须转换为块级元素,可以使用display,浮动或定位转化*/
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
}

content是必须写的，里面写要插入的内容(至少为空)，使用::before创建的是一个类似DOM元素，但是在代码中不体现。

2.::after:可以在元素的内容之后插入新内容。

div::after{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
}

和::before用法相同。

3.first-letter：获取第一个字符     注意： "first-letter" 伪元素只能用于块级元素。

 /*获取第一个字符：让p元素中首字变为红色，字体变为30px，并下沉*/
        p::first-letter {
        color: red;
        font-size: 30px;
        float:left;
}

效果：

4.first-line:获取首行。

/*获取p中第一行内容，让第一行加下划线，如果设置了::first-letter,那么无法设置首字的样式*/
        p::first-line {
            text-decoration: underline;
 }

5.::selection:设置当前选中内容的样式

如上，在chrome浏览器中选中日默认是蓝色，当我们需要改变选中的样式时，可以使用::selection。

p::selection {
            background-color: pink;
            color: red;
            /*它只能设置显示的样式，而不能设置内容大小*/
            /*font-size: 30px;*/
}

效果：