CSS伪元素的基本使用
上一篇文章介绍了很多个伪类的使用,这篇来说一下伪元素。
伪元素之所以称为“伪”,主要是因为它不是真正网页里的元素,但是标线行为又跟真正网页元素一样,也可以对其使用css操作。
伪元素比较少,今天就一个个的用法,不分门别类了。
一、::after和::beore
after和before用的比较多一些。都是配合content来给元素添加一些装饰
.item::before {
content: '*';
color: red
}
.item::after {
content: '*';
color: red
}
二、::before 略
三、::cue
匹配所选元素中的WebVTT提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索。多使用在视频的文本显示上。
四、::first-letter
修改块级元素的第一行的第一个字母,比如你经常看到故事书中的第一个文字是大写的,就可使用它在页面上做对应的设置
五、::first-line
用在块级元素上的第一行
六、::selection
应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)
简单来说就是修改我们用鼠标选中的文字的颜色和背景色
七、::slotted()
用于选定那些被放在 HTML模板 中的元素,这对于我们现在使用框架而不是再自创标签的用户来说,很少会用到