Pseudo-elements，伪元素，它指的是元素的某个部分。在设计样式的时候，可以使用 CSS 提供的一些关键词创建所选元素的伪元素。

比如我想在这个标题的上面还有下面添加点样式，这些样式可能需要添加额外的元素，或者我们也可以使用 ::before 还有 ::after 这两个关键词，在选中的元素里创建两个伪元素。用 ::before 创建的伪元素表示所选元素里的第一个子元素，用 ::after 创建的伪元素表示的是所选元素里的最后一个子元素。

先修改一下 HTML 文档，在这个标题元素的上面添加一个类，名字可以设置成 title。在文档的样式表里，我们用这个类去给这个标题设计样式。

::before

先用 .title 这个类选择器，然后是 ::before 这个关键词，注意创建伪元素用的这些关键词的名字里面，都会使用两个冒号作为前缀。

默认创建的伪元素都是行内元素，在这块样式里，我们先用 display 把元素变成一个块级元素，把它的值设置成 block。然后可以用 content 这个属性在元素里添加点内容，可以添加几个波浪符号。再用 line-height 把行高设置成 1，然后用 font-size 把字号设置成 16 像素。

现在这个标题的上面就会出现一些波浪号，这块内容在这个标题元素的 before 这个伪元素里面。

::after

复制一份这块样式，把 before 改成 after，它会在选中的元素里创建一个伪元素，这个 after 伪元素是元素的最后一个子元素。现在标题的下面也会出现一些波浪符号，这些内容在元素的 after 这个伪元素里面。

用开发者工具检查一下这个标题元素，在元素的上面会显示有一个 ::before 伪元素，在它的下面，会显示 ::after 这个伪元素，选中这个伪元素可以检查应用在它上面的样式。

选择器列表

样式表里现在有两块样式是一样的，这种情况我们可以使用选择器列表定义这块样式，复制一下 .title::after 这个选择器，再把这块样式删除掉，然后在上面这块样式的选择器的后面，添加一个逗号，再把复制的选择器粘贴到这里，意思就是这两个选择器选中的元素，共同拥有这块样式。