1. <style>                              
    2.     .div::before{                    
    3.         content: "中国加油！";            
    4.         display: inline-block;       
    5.         width: 100px;                
    6.         height: 100px;               
    7.         background-color: pink;      
    8.     }                                
    9.     .div::after{                     
    10.         content: "米国加油！";            
    11.         display: inline-block;       
    12.         width: 100px;                
    13.         height: 100px;               
    14.         background-color: pink;      
    15.     }                                
    16. </style> 
    18. <body>              
    19.   <div class="div"> 
    20.       武汉加油          
    21.   </div>            
    22. </body>

    image.png
    解释：

    • before 和 after 必须要有 context 属性；
    • before 在内容的前面， after 在内容的后面；
    • 两者创建的元素都是 行内元素 。
    • 这种方式创建的元素没有直接写在Dom里面，所以叫 伪元素 ；
    • 伪元素的权重和标签的权重一样，都是1。