CSS伪元素是指在文档树中不存在的元素,它们并不是HTML标签中定义的元素,而是通过CSS生成的元素。
::before
::before是伪元素中最常用的一个,它可以在选中的元素前面插入内容。我们可以给::before设置content属性来插入内容。
div::before{
content: "前缀内容";
}
上面的代码会在div元素的前面插入前缀内容
::after
::after和::before很相似,不过它是在选中元素的最后面插入内容。同样地,我们可以通过content属性来插入内容。
div::after{
content: "后缀内容";
}
上面的代码会在div元素的后面插入后缀内容
::first-letter
::first-letter用来对某个元素的首字母进行样式化。我们可以为::first-letter设置font-size、color等属性来改变字母的样式。
p::first-letter{
font-size: 20px;
color: red;
}
上面的代码会把每个p元素的第一个字母的字体大小设置为20px,颜色设置为红色。
::first-line
::first-line用来对某个元素的第一行进行样式化。我们可以为::first-line设置font-size、color等属性来改变第一行文本的样式。
p::first-line{
font-size: 20px;
color: red;
}
上面的代码会把每个p元素的第一行字体大小设置为20px,颜色设置为红色。