你可能不知道伪元素(::before和::after)有多强大~
最近
ChatGPT Prompt
比较火,我新出了两篇:
助你了解 ChatGPT 和 帮助你写出清晰有效的
ChatGPT Prompts
,欢迎阅读~
1、背景
前几天看到一篇文章里面嵌了一个很好看的渐变色阴影的卡片(无奈它是一张图片,所以也就看不到样式),图片是这样的:
作为一个练习时长三年半的 “CSS 菜鸡”
,我寻思着这玩意儿能用 CSS
实现不?于是,好奇心驱使下,我们捣鼓了一番,“优雅地”实现了这个效果。
我一开始冒出来的想法是,这可能是用 box-shadow
属性实现的,它的语法是这样的:
box-shadow: offset-x offset-y blur spread color position;
color
换成渐变色?试试…
年轻了,color
和 linear-gradient
不是一个世界的,显然是 not ok 的,完全没有效果!
那难道背景是个高斯模糊(最底下是个渐变背景)?或者叠三层(底层纯色,中间一层渐变色,上层卡片),然后用定位处理?好像理论上是可以的。。。
但是总觉得这么实现有点不优雅,属于是莽夫行为 ~ 有啥比较优雅点的实现吗?翻了一下 CSS 表,我找到了答案:是的,有!它就是伪元素 ::before
或者 ::after
。
来看效果:
直接上代码:
于是,我对这俩做了深入的了解。
2、伪元素 ::before 和 ::after
什么是伪元素?
我想很多经验丰富的 FEer 应该还记得清除浮动的几个技巧,以前比较常用的就是伪元素:
.clearFix::after,
.clearFix::before {
display: block;
content: "";
clear: both;
visibility: hidden;
height: 0;
}
.clearFix {
zoom: 1;
}
CSS 中的::before
和::after
伪元素允许你在页面上插入内容,而不需要出现在 HTML 的结构中。虽然最终的结果实际上并不在 DOM 中,但它在页面上的显示就像它在 DOM 中一样,基本上是这样的:
div::before {
content: "before";
}
div::after {
content: "after";
}
结果是:
<div>
before
<!-- ... -->
after
</div>
需要注意的是,有些地方写法是单冒号:
:before 和 :after
,实际上这是新旧写法,支持双冒号(::)CSS3语法
的浏览器也都支持(:)
语法,IE8 只支持单冒号,所以目前建议只使用单冒号以获得最佳的浏览器支持。::
是较新的格式,旨在区分伪内容和伪选择器。如果你不需要 IE8 的支持,可以随意使用双冒号。
浏览器支持方面:
我们通常会在如下场景下使用它:
- 生成的内容在元素内容之前,但是又不想额外增加一层 DOM。
::after
的内容在源顺序上也是 “后” 的,所以如果自然堆叠在一起,它的位置会在::before
之上。
注意,内容仍然在它们所应用的元素里面。这个命名的感觉就像它们可能渲染在元素之前或之后,但实际上是在里面的其他内容之前或之后。
我想最重要的可能是它里面的 content
属性了,它可以放很多类型的值:
- 一个字符串:
content:"一个字符串";
- 特殊字符需要被特别编码为一个unicode entity
。 - 一张图片:
content:url(/path/to/image.jpg);
- 图片会以它的精确尺寸插入,不能调整大小。因为像渐变这样的东西实际上是图像,一个伪元素可以是一个渐变。 - nothing:
content:"";
- 对clearfixes
和插入图像作为背景图像很有用(设置宽度和高度,甚至可以用background-size
调整大小)。 - counter:
content:counter(li);
- 对列表的样式非常有用(::marker
也用于此)。 - 一个断行符:
content:"Killing \A Me \A Softly";
- 有时候非常有用。
实际上你还可以插入 html,只是没有任何效果。
3、用伪元素实现彩虹渐变效果
学到了这个,以后一些常规的效果,实际上就不需要去找 UI 了,省得被骂是 IKUN 粉~
end~
欢迎关注之前的几篇文章:
- 【ChatGPT】一文教你怎么编写清晰有效的(Prompt)提示词~
- GPT-4 炸裂成那样,前端真的还有机会吗?我是这么看的~
- 【脚手架】从 0 到 1 搭建 React18+TS4.x+Webpack5 项目(一)项目初始化
- 【脚手架】从 0 到 1 搭建 React18+TS4.x+Webpack5 项目(二)基础功能配置
- 【脚手架】从 0 到 1 搭建 React18+TS4.x+Webpack5 项目(三)代码质量和 git 提交规范
- 【脚手架】从 0 到 1 搭建 React18+TS4.x+Webpack5 项目(四)发布脚手架
- 【Go】基于 Gin 从 0 到 1 搭建 Web 管理后台系统后端服务(一)项目初始化、配置和日志
- 【Go】基于 Gin 从 0 到 1 搭建 Web 管理后台系统后端服务(二)连接数据库
- 【重学 CSS】图文并茂!一次性搞懂 Flex 布局,实现“布局自由”~
- 【重学 CSS】图文并茂!一次性搞懂 Grid 布局,实现“布局自由”~
- 【微前端】手把手教你从 0 到 1 实现基于 Webpack5 模块联邦(Module Federation)的微前端~
- 【微前端】在造一个微前端轮子之前,你需要知道这些~
- 【React】万字长文!100+个让你事半功倍的常用 React Hooks 和工具包
- 【React】面试官:如何在页面刷新之后保持状态?看看你知道几种~
- 【2023】前端趋势前瞻,学起来!