伪元素 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪元素</title>
        <style>
        /* 
            伪元素主要表示一些特殊元素
                ::before表示元素开头的位置
                ::after表示元素结束的位置
                ::first-letter表示首字母
                ::first-line首行
                ::selection选中内容
         */
            p::before{
                content: '测试';
            }
            
            p::after{
                content: '这是测试';
            }
            
            p::first-letter{
                color: #00FFFF;
            }
            
            p::first-line{
                background-color: #BBFFAA;
            }
            
            p::selection{
                color: #87CEEB;
            }
        </style>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
        
    </body>
</html>

 

posted @ 2022-05-08 22:12  氯丙嗪  阅读(13)  评论(0)    收藏  举报