开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情
作用
伪元素和伪类写法和作用相似，伪元素为了实现特定的效果，它会在文档中插入一个虚拟的元素，和伪类生成的幽灵类的概念类似。
写法
- 伪元素前面有两个冒号。一开始伪元素的写法和伪类是一样的，使用一个冒号，但是后面为了区分二者，将伪类前面改为了两个冒号。不过为了兼容，浏览器一般也会支持一个冒号的写法。【尽量按标准来！！！写两个冒号】
- 伪元素只能出现在css声明的选择器的最后。这也表明一个选择器中只能有一个伪元素。
常见伪元素
装饰首字母::first-letter
作用
::first-letter伪元素用于装饰任何非行内元素的首字母，若是文本以标点符号开头的，则装饰任何非行内元素的标点符号和第一个字母。
当然此处的标点符号包括中文中的标点符号，浏览器是可以识别出来的。
常见应用场景
多应用于首字母大写下沉等
效果
用户代理【浏览器】会代为装饰首字母，像将首字母放在一个虚构的结构性标签元素中并给该元素指定相应的样式一样。
示例
<p>"This is a pen"</p>
p::first-letter { color: red; }会将上述HTML代码中的"This的"和T变成红色。
装饰首行::first-line
作用
::first-line与::first-letter类似，只不过前者是用来修饰显示在屏幕上的文本的第一行的，这个用户代理会自行判断哪些文字是第一行文字，总之最后的效果是：无论屏幕宽窄，无论第一行在此刻是显示几个字符。第一行显示的文字都会应用指定样式。
注意
首行的结尾可能会在某个元素的文本内容中间的某位置处结束，此时样式也只会修饰结束位置及前面的文本上，而不会应用在剩余的文本内容上。
例如 <p>老师讲课<a href="www.baidu.com">很无聊但是得听</a></p>，假如第一行在聊处结束，那么样式也只会应用在聊及聊前面的文字上，不会应用在聊字后面的内容。
::first-letter与::first-line的限制
- 这两个元素只可以应用在块级元素上，无法应用在行内元素上，
- 这两个元素可以使用的属性规则是有限制的。
装饰或创建前置和后置内容元素::before，::after
这两个伪元素可以在指定元素前添加generated content,并且修饰。
该内容涉及内容很深，后续有机会详细说明。
