Pseudo-elements，伪元素，指的是元素的某个部分。

::before

伪元素会用两个冒号作为前缀，比如 ::after 还有 ::before 是两个比较常用的伪元素。现在这个内容作者名字的前面使用一了个破折号，我们可以利用 ::before 这个伪元素，把需要的破折号作为这个伪元素里的内容。

先去掉在内容作者前面添加的破折号，然后在它的这个段落包装上面添加一个类，名字可以是 dash，在样式表里，先用一下 .dash 这个类选择器，后面加上 ::before 这个伪元素，意思就是要设计一下用了 .dash 这个类的元素的 ::before 这个伪元素的样式。

里面可以用 content 属性设置一下元素里的内容，添加一个破折号。现在内容作者前面会出现一个破折号，这个破折号实际上是这个段落元素里的 ::before 这个伪元素里的内容，检查一下这个元素，这里会出现 ::before 这个伪元素，再选中这个伪元素，观察一下用在这个伪元素上的样式。

::after

再试一下 ::after 这个伪元素，在这个标题元素上面添加一个类，名字是 .extension-line，在样式表里，用这个类的名字作为选择器的一部分，后面加上 ::after 这个伪元素，意思是设计一下使用了 .extensition-line 这个类的元素的 ::after 这个伪元素的样式。

把 display 设置成 block ，让元素作为块级元素，再把 content 设置成空白，然后把 width，宽度设置成 100%，再用 border-bottom 添加一个下边框，宽度是 1 像素，类型是 solid，颜色是 black。然后再用 margin-top 添加点上边的外边距，大小是 4 像素，再用 margin-left 添加左边的外边距，大小是 16 像素。

现在这个边线会在标题的下面显示，如果让它跟标题在同一排显示，可以再用 .extensiion-line 这个类选择器添加一段样式，display 设置成 flex，让元素变成一个 flex 容器，用 align-items 把交叉轴对齐设置成 center，让 flex 项目在交叉轴居中，现在标题文字会换行，不让它换行可以把 white-space 设置成 nowrap。

这样用了 .extension-line 这个类的元素的右边会添加一条延长线。检查一下这个标题元素，选中元素里的 ::after 这个伪元素，再观察一下这个元素使用的样式。

::first-line / ::first-letter

元素里的第一行可以使用 ::first-line 表示，第一个字可以使用 ::first-letter 这个伪元素表示，比如我们用 p::first-letter 作为选择器写一段样式，把 font-weight 设置成 bold，现在段落里的文字的第一个字符会加粗显示。

::selection

鼠标拖拽选中一行文字，被选中的文字会有一种特别的样式，现在背景颜色是蓝色的，想要定制一下选中的样式，可以使用 ::selection 这个伪元素。

在样式表里，直接用 ::selection 这个伪元素作为选择器，写一段样式，把 background 设置成 greenyellow，现在被选中的文字的背景颜色会变成这种 greenyellow，黄绿色，这个样式是用 ::selection 这个伪元素定制的。