CSS伪元素的基本使用

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模板 中的元素，这对于我们现在使用框架而不是再自创标签的用户来说，很少会用到