:before，after和其余伪元素添加

div:nth-of-type(2)::before{
    /*必须添加content属性，不然后期不可见*/
    content: "";
    /*默认是行级元素，若是想设置宽高，就必须转换为块级元素*/
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 10px;
    left: -10px;
    top: -10px;
}
div:nth-of-type(2)::after{
    /*必须添加content属性，不然后期不可见*/
    content: "";
    /*默认是行级元素，若是想设置宽高，就必须转换为块级元素*/
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 10px;
    left: -10px;
    bottom: -10px;
}

/*获取第一个字符：实现首字下沉*/p::first-letter{    color: red;    font-size: 30px;    float: left;/*文本环绕*/}/*获取第一行内容:若是设置了::first-letter,那么没法同时设置它的样式*/p::first-line{    text-decoration: underline;}/*设置当前选中内容的样式*/p::selection{    background-color: pink;    color: red;    /*它只能设置显示的样式，而不能设置内容大小*/    /*font-size: 30px;*/}