CSS伪元素的基本使用

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

相关文章
|
7小时前
|
前端开发 开发者
提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
【4月更文挑战第2天】 提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
36 12
|
8小时前
|
Web App开发 前端开发 JavaScript
关于 Web 开发中的 CSS before 伪元素
关于 Web 开发中的 CSS before 伪元素
35 0
|
7月前
|
前端开发
CSS3常见伪类和伪元素及其使用方法
CSS3常见伪类和伪元素及其使用方法
61 0
|
7月前
|
前端开发 JavaScript
CSS伪类和伪元素
CSS伪类和伪元素
23 1
|
8月前
CSS3 伪元素选择器
CSS3 伪元素选择器
39 0
|
8月前
|
前端开发
CSS布局:浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
CSS布局:浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
38 0
|
7小时前
|
前端开发
css伪类伪元素都有哪些区别是什么
css伪类伪元素都有哪些区别是什么
|
7小时前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(下)
【CSS进阶】巧用伪元素before和after制作绚丽效果(下)
13 0
|
7小时前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(上)
【CSS进阶】巧用伪元素before和after制作绚丽效果
29 0
N..
|
7小时前
|
前端开发 UED
CSS伪类和伪元素
CSS伪类和伪元素
N..
8 0