4.4伪元素

使用伪元素可以表示某些元素的特殊位置，比如表示某个元素的第一个字符、第一行文本等。

1、:first-letter 为指定元素中的第一个字符来设置一个特殊的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            p:first-letter{
                color: red;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>
                壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。
            </p>
        </div>
    </body>
</html>

浏览器中显示为：
这里写图片描述

2、:first-line 为指定元素中的第一行设置一个背景颜色为黄色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            p:first-line{
                background-color: deepskyblue;
            }
        </style>
    </head>
    <body>
        <div>
            <p>
                壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。
            </p>
        </div>
    </body>
</html>

浏览器中显示为：
这里写图片描述

3、 :before表示元素最前边的部分 | :after表示元素的最后边的部分
一般before都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            /*content后面的内容要加双引号，否则部分浏览器显示不出来*/
            p:before{
                content: "我是开始部分";
                color: blue;
            }
            p:after{
                content: "我是结束部分";
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <p>
                壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。
            </p>
        </div>
    </body>
</html>

浏览器中显示为：
这里写图片描述

猜你喜欢