伪元素选择器
伪元素就是假象的元素,并不存在DOM树中,无法捕获,也无法绑定事件。
常用的伪元素
::first-line
用于向某个元素的第一行添加样式
<style>
p::first-line{
color: yellowgreen;
}
</style>
<body>
<p>
撒旦哈德啥的吧扣税的板卡设计的巴萨尽快<br/>
asdjashdjklasjhdasdasjdhsjadhasjkdhasjkdhsadhk
</p>
</body>
效果图如下:
::first-letter
用于向某元素的第一个英文字母或第一个汉字添加样式
<style>
p::first-letter {
color: red;
font-size: 25px;
}
</style>
<body>
<p>
撒旦哈德啥的吧扣税的板卡设计的巴萨尽快<br/>
asdjashdjklasjhdasdasjdhsjadhasjkdhasjkdhsadhk
</p>
</body>
效果图如下:
::before
用于向某个元素内容前追加内容
<style>
li::before{
content: 'before';
color:red;
}
</style>
<body>
<ul>
<li>asdasdasd</li>
</ul>
</body>
效果图如下:
::after
用于向某个元素内容前追加内容
<style>
li::after{
content: 'after';
color:blue;
}
</style>
<body>
<ul>
<li>asdasdasd</li>
</ul>
</body>
效果图如下: