• 投稿

无废话!3分钟搞懂 CSS 伪元素 ::before & ::after

3.1万
10
2025-11-02 18:28:11
1411
427
1776
47
在本期视频中,我们将通过代码实例,带你快速了解 CSS 中非常强大但又容易混淆的伪元素 ::before 和 ::after。 我们会从它们的工作原理讲起,一步步教你如何利用它们,来实现一些普通CSS难以做到的创意设计,让你的网页和组件在细节上更胜一筹。 ✨ 伪元素常用于: 创建自定义的列表符号:替换掉浏览器默认的列表样式,换上你自己的图标或设计。 制作动态背景/边框效果:利用伪元素,为你的组件添加一个可以动的背景、光影或边框效果。 添加额外的装饰性元素:在不添加额外 HTML 标签的情况下,给页面增加一些悬浮的、纯装饰性的视觉元素,让你的代码更整洁。 更多高级造型技巧:将伪元素与渐变 (gradients)、圆角 (border-radius)、悬停效果 (hover)、过渡 (transitions) 和动画 (animations) 结合使用,释放它们的真正潜力。 希望这期视频能帮你彻底搞懂伪元素!如果你有任何问题,欢迎在评论区留言。 别忘了点赞和关注哦!
全网同名 讨论群置顶动态
42.8万播放
简介
10分钟彻底搞懂CSS盒模型(Box Model),告别布局烦恼!
10:06
12分钟搞懂CSS Flex布局 告别布局难题
12:28
12分钟搞懂CSS Grid 一行代码实现响应式布局!
11:57
7分钟彻底搞懂Flex和Grid的核心区别与选择
07:03
3分钟搞懂 CSS 伪元素 ::before & ::after
02:50
4分钟玩转CSS定位
03:58
12分钟彻底搞懂 CSS 动画与过渡
12:05
6分钟彻底搞懂CSS em和rem,告别选择困难症!
06:26
8分钟解决你工作中99%的CSS背景图难题!
07:46
10分钟讲透CSS文档流:从BFC底层原理到外边距折叠
10:21
11分钟彻底搞懂CSS媒体查询,响应式布局其实没那么难
11:03
6分钟讲清楚CSS逻辑属性 你以为在写布局,其实把方向写死了?
05:58
讲清 inline style、@layer 和 specificity
02:34
讲清 vh、svh、lvh、dvh 怎么选
03:35
绝对定位还是 CSS Grid?背景海报文字叠加到底该怎么选
04:06
Firefox DevTools 好用在哪?CSS 初学者别只用 Chrome
05:19
CSS 隐藏元素前,你需要先判断这件事
04:52
CSS 颜色表达方式:RGB、Hex、HSL、OKLCH 到底怎么选?
05:23
z-index 为什么会失效?理解 CSS Stacking Context 的核心规则
06:36
客服
顶部
赛事库 课堂 2021拜年纪