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

相关文章
|
前端开发 开发者
提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
【4月更文挑战第2天】 提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
272 12
|
前端开发
CSS3常见伪类和伪元素及其使用方法
CSS3常见伪类和伪元素及其使用方法
203 0
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
185 1
|
前端开发 JavaScript
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
269 1
|
前端开发
CSS中的层级选择器&伪类选择器和伪元素选择器
CSS中的层级选择器&伪类选择器和伪元素选择器
|
前端开发 JavaScript
CSS进阶-CSS选择器高级:伪类与伪元素
【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
456 2
CSS进阶-CSS选择器高级:伪类与伪元素
|
前端开发
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
|
前端开发 UED
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式
【5月更文挑战第7天】CSS 提供关键帧和过渡动画两种方式创建动态效果。关键帧动画通过定义一系列样式的关键帧,浏览器自动插入过渡帧形成动画,如示例中背景颜色变化的循环。过渡动画则在属性改变时(如鼠标悬停)触发,展示平滑转换,如 div 元素尺寸变化。通过调整帧时间、顺序和样式,可实现更复杂的动画,增强网站交互体验。
134 4
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
2888 0
|
前端开发
CSS伪类与伪元素的区别
CSS伪类与伪元素的区别
168 0