啥是css3的伪元素::after和::before

1. 啥是::after 和 ::before，要用来干啥呢？

emmmm，它是伪元素。。。

用来装饰当前元素；最重要的是实现语义化，如果要创建一些没有实际内容的节点，或者加入辅助样式的文本，那用它就对了。

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

• before 和 after 必须有 content 属性（不然就没啥用）
• befor 在内容的前面，after在内容的后面
• before 和 after 创建一个元素，但是属于行内元素（这个很重要）
• 因为在 dom 里面看不见刚才创建的元素，所以我们称它为伪元素
• 伪元素和标签选择器一样，权重为 1
  例：

    <div>是</div>

        div::before {
            width: 200px;		/*因为是行内元素，所以是无效设置*/
            height: 200px;
            background-color: red;
            content: "我";		/*必须有的属性*/
        }
        
        div::after {
            width: 20px;
            height: 20px;
            background-color: red;
            content: "Gragon";
        }

2. 可以用来清除浮动

经常用它来干啥呢？

1. 清除浮动

        div::after{
            content: "";
            display: block;
            clear: both;
        }

2. 字体图标

    <div></div>

        div {
            width: 249px;
            height: 35px;
            border: 1px solid #000;
            position: relative;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 6px;
            right: 8px;
            width: 15px;
            height: 15px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.3s;
        }
        /* 鼠标经过div，里面的三角旋转 */
        
        div:hover::after {
            transform: rotate(225deg);
        }

效果

（作为学习笔记）