CSS伪元素选择器

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /**
             * 使用伪元素表示元素中的一些特殊的位置
             * 首字母：first-letter
             * 首行：first-line
             * */
            /*为p中第一个字母设置颜色
             */
            
            p:first-letter {
                color: red;
                font-size: 20px;
            }
            /*为p中第一行设置背景颜色
             */
            
            p:first-line {
                background-color: yellow;
            }
            
            /**
             *:before表示元素最前边的部分，紧随着标签的部分
             * 一般before都需要结合content这个样式一起使用
             * 通过content可以向before或after的位置添加一些内容
             * 
             * :after表示元素的最后边
             */
            p:before{
                content: "我会出现在整个段落的最前边";
                color: red;
            }
            p:after{
                content: "我会出现在整个段落的最后边";
                color: yellow;
            }
        </style>
    </head>

    <body>
        <p>
            我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落<br /> 我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
        </p>
    </body>

</html>