伪元素的概念
- 描述某些特殊的位置，例如第一个字母、标签的开头
-
以::开头
- ::first-letter 第一个字母
- ::first-line 第一行
- ::selection 选中的内容
- ::before和after 元素的开始，不是指第一个或最后一个字母
- before和after必须结合content属性使用
::first-letter示例
<!--将第一个字母设置成红色-->
<head>
<style>
p::first-letter{
color:red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
显示效果
::first-line示例
<!--将第一行的字体设置成红色-->
<head>
<style>
p::first-letter{
color:red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque .</p>
</body>
显示效果无论如何缩放，第一行总是保持红色
selection示例
<!--将选中的字体设置成红色-->
<head>
<style>
p::first-letter{
color:red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque .</p>
</body>
显示效果
before示例
<!--在元素前添加红色的示例文字-->
<head>
<style>
div::before{
content:"示例内容";
color:red;
}
</style>
</head>
<body>
<div>我是div元素</div>
</body>
显示效果
- content的值要用引号标注
- before和after的内容无法被选中，因为是属于CSS的内容
-
q标签的自动加“ ”功能也是通过before和after实现的