在 CSS 中,可以使用伪元素(pseudo elements
)来构建一些特殊的内容。伪元素可以在目标元素的前面或后面创建一个虚拟的元素,并且可以通过 CSS 来设置其样式。
常用的伪元素包括 ::before
和 ::after
,它们可以在目标元素的前面或后面创建一个虚拟的元素,例如:
p::before {
content: "前缀内容 ";
}
p::after {
content: " 后缀内容";
}
上面的 CSS 代码会在每个 p
元素的前面添加一个包含 "前缀内容 "
的虚拟元素,并在每个 p
元素的后面添加一个包含 " 后缀内容"
的虚拟元素。其中 content
属性用于设置虚拟元素的内容。
除了 ::before
和 ::after
,还有其他一些常用的伪元素,例如 ::first-letter
和 ::first-line
。其中 ::first-letter
用于设置第一个字母的样式,例如:
p::first-letter {
font-size: 2em;
color: red;
}
上面的 CSS 代码会将每个 p
元素的第一个字母的字体大小设置为 2em
,颜色设置为红色。
而 ::first-line
则用于设置第一行的样式,例如:
p::first-line {
color: blue;
font-weight: bold;
}
上面的 CSS 代码会将每个 p
元素的第一行文本的颜色设置为蓝色,字体加粗。需要注意的是,::first-line
只能用于块级元素。
除了上述常用的伪元素外,还有一些其他的伪元素,例如 ::selection
(用于设置选中文本的样式)和 ::placeholder
(用于设置表单元素的占位符文本的样式)等。