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

相关文章
|
6月前
|
前端开发 开发者
提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
【4月更文挑战第2天】 提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
114 12
|
前端开发 JavaScript
CSS伪类和伪元素
CSS伪类和伪元素
43 1
|
前端开发
CSS3常见伪类和伪元素及其使用方法
CSS3常见伪类和伪元素及其使用方法
89 0
|
3月前
|
前端开发
CSS中的层级选择器&伪类选择器和伪元素选择器
CSS中的层级选择器&伪类选择器和伪元素选择器
|
5月前
|
前端开发 JavaScript
CSS进阶-CSS选择器高级:伪类与伪元素
【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
130 2
CSS进阶-CSS选择器高级:伪类与伪元素
|
5月前
|
前端开发
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
|
4月前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
133 0
|
5月前
|
前端开发
CSS伪类与伪元素的区别
CSS伪类与伪元素的区别
34 0
|
前端开发 JavaScript
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
118 1
|
6月前
|
前端开发 UED
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式
【5月更文挑战第7天】CSS 提供关键帧和过渡动画两种方式创建动态效果。关键帧动画通过定义一系列样式的关键帧,浏览器自动插入过渡帧形成动画,如示例中背景颜色变化的循环。过渡动画则在属性改变时(如鼠标悬停)触发,展示平滑转换,如 div 元素尺寸变化。通过调整帧时间、顺序和样式,可实现更复杂的动画,增强网站交互体验。
55 4