使用伪元素可以表示某些元素的特殊位置,比如表示某个元素的第一个字符、第一行文本等。
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>
浏览器中显示为: