: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;*/
}