CSS-常见的伪元素选择器的用法详解

:before 与 :after 分别在被选择元素的内容之前和内容之后插入元素，所以必须在双标签中使用伪元素选择器，在单标签中无效；使用伪元素选择器时必须要设置 content 属性来指定要插入的内容，若内容为空将其属性值设置为 '' 空字符串即可；通过伪元素选择器插入的内容默认以行内元素的形式显示；想要使其成为块元素，通过样式属性 display 转换即可；为了与伪类选择器进行区分，通常在使用时用 :: 表示伪元素

::before

::before 选择器用于向选定的元素内容之前插入元素

::after

::after 用于向选定的元素内容之后插入元素

示例：

div {
	width: 200px;
	height: 200px;
	background-color: red;
}

div::before {
	content: 'before';
}

div::after {
	content: 'after';
}

<div></div>