伪元素(Pseudo elements)是 CSS 中的一个重要概念,它允许开发者创建一个在文档树之外的元素,并且给这个元素添加样式,从而实现各种效果。
伪元素使用双冒号(::)来表示,与伪类选择器的单冒号(:)区分开来。伪元素可以用在 CSS 选择器中,表示要选择的元素的一部分。在选择器中使用伪元素时,它们会被插入到指定的元素之前或之后,并且可以用样式属性来设置它们的内容、颜色、位置等。
下面是常见的伪元素:
伪元素的语法如下:
selector::pseudo-element {
/* styles */
}
在上面的代码中,selector 表示要选择的元素,pseudo-element 表示要使用的伪元素。例如,使用 ::before 伪元素在元素前插入一个内容为“hello”的元素,可以写成下面的代码:
p::before {
content: 'hello';
}
注意,伪元素必须有 content 属性,否则在页面上不会显示任何内容。此外,伪元素可以用来实现各种效果,如添加箭头、制作单选按钮、实现字体图标等。掌握伪元素的使用可以让你的 CSS 技能更上一层楼