<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素</title>
    <style>
        /* 
        伪元素，表示页面中一些特殊的并不真实存在的元素 (特殊的位置)
         */
        p{
   
            color: blue;
        }
        /* 
        第一个字母
         */
         p::first-letter{
   
             font-size: 40px;
         }

         /* 第一行 */
         p::first-line{
   
             background-color:yellowgreen;
         }

         /* 选中的内容 */
         p::selection{
   
             color: red;
         }
         /* ::before 元素的开始
            ::after 元素的结束
                这两个 必须结合content属性来使用 因为正常来说
                之前和之后是没有内容的，那么自然也就没有效果显示出来
          */
        div::before{
   
            content: '【';
            color: rgb(7, 13, 102);
        }
        div::after{
   
            content: '】';
            color: rgb(7, 13, 102);
        }
    </style>
</head>
<body>
    <div>这是div 可以用来看before 和after属性的效果</div>
    <p>这里是段落
         <br>莫欺少年穷，终需有日龙穿凤

    </p>
</body>
</html>