伪类和伪元素

伪类和伪元素不是同一个东西

 .box::before{
 
             content: "我是before";
             border: 1px solid #000;
             width: 100px;
             height: 100px;
             display: block;
         }

        /* 在不改变html结构的情况下，给某个元素内容后面再加一个内容 */
         .box::after{

             content: "我是after";
             border: 1px solid #000;
             width: 100px;
             height: 100px;
             display: block;
         }

         /* 我们一般用before和after只是为了清除浮动带来的影响 */
 /* 找到第一行 */
         p::first-line{

            background-color: red;
         }
         
         /* 找到第一个字符 */
         p::first-letter{

             font-weight: bold;
         }
         
         /* 设置选中的样式 */
         p::selection{

             background-color: orange;
         }
         
         /* 匹配所有占位符 */
         ::placeholder{

            color:red;
         }