CSS伪元素基本使用

网友投稿 789 2022-05-30

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

应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)

简单来说就是修改我们用鼠标选中的文字的颜色和背景色

CSS伪元素的基本使用

七、::slotted()

用于选定那些被放在 HTML模板 中的元素,这对于我们现在使用框架而不是再自创标签的用户来说,很少会用到

CSS

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:系统运维岗位职责和要求
下一篇:repo init 报错 — HarmonyOS 搭建轻量与小型系统环境过程中出现的错误及解决方法
相关文章