巧用CSS新技术减少伪元素的使用
巧用CSS新技术减少伪元素的使用
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
在 css1 中就引入了伪元素—— ::first-letter 和 ::first-line，最常用的伪元素 ::before 和 ::after 在 css2 中被引入，它们并不实际 存在 于文档树中，分别作为已选中元素的第一个子元素和最后一个子元素，常被用来添加额外的装饰元素而不扰乱文档本身。
巧用新技术
过去我们常为兼容问题烦恼不已，而现在各主流浏览器对 CSS3 的支持越来越完善，CSS3 特性大部分都已经有了很好的浏览器支持度，微软也将基本淘汰IE浏览器，明年6月15日起暂停支持。
这让我们可以更自由灵活地探索CSS新技术，可以在不使用伪元素的情况下实现同等的样式效果。通过减少对伪元素的依赖，一些场景下可以编写更少的CSS代码量，减少嵌套元素和层叠上下文问题。
举几个🌰
渐变色边框
可以使用渐变色边框让模块在整个页面中突显出来：
伪元素方式
伪元素的样式为渐变色背景，并设置 z-index 为负数使得内容区域在渐变色背景之上，内容区域需要设置纯色背景：
.gradient-box {
display: flex;
align-items: center;
width: 90%;
position: relative;
padding: 30% 2em;
box-sizing: border-box;
$border: 5px;
color: #FFF;
background: #000;
background-clip: padding-box;
border: solid $border transparent;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
margin: -$border;
background: linear-gradient(to right, red, orange);
}
}
border-image方式
可以使用更简单的语法实现相同的效果：
border-image-slice: 1;
border-image-source: linear-gradient(to right, red, orange);
三角形
我们常使用 ::before 和 ::after 伪元素创建规则形状，随便搜可以找到许多相关的生成器小工具，比如三角形生成器：
具体的应用场景往往不止生成一个三角形那么简单，通常是三角形作为装饰，再结合具体的形状形成一个整体，比如弹窗、信息提示框、箭头按钮等，以下面为例：
伪元素方式
使用绝对定位的 ::before 伪元素构造三角形，这种方式的缺点是增加 :hover 样式时需同时修改 .tooltip 和伪元素的背景颜色（也可以使用新的CSS变量解决）：
.tooltip {
display: inline-block;
position: relative;
padding: 20px;
background: lightseagreen;
&::before {
$triangleHeight: 20px;
content: '';
position: absolute;
right: 30%;
bottom: -$triangleHeight;
border: 0 solid transparent;
border-width: 0 30px $triangleHeight 0;
border-color: transparent lightseagreen transparent transparent;
}
}
clip-path方式
clip-path 属性可以裁剪和构造多边形（属性值种类很多，这里不过多展开）：
.tooltip {
display: inline-block;
padding: 20px 20px 40px;
background: lightseagreen;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 60% 75%, 0% 75%);
}
clip-path 也有相关的 生成器工具：
擦拭动画
擦拭动画是按钮悬停的一种渐变动画效果：
伪元素方式
::before伪元素绝对定位，设置变化的背景颜色，并设置 scaleY(0) 使其不可见；- 设置
transform-origin确保擦拭动画的方向； - 鼠标悬停的时候，设置伪元素
scaleY(1)从底部向上展开：
.wipe {
position: relative;
background: #1e7a90;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: #fff;
transform: scaleY(0);
transform-origin: bottom center;
transition: transform ease-in-out 300ms;
}
&:hover {
&::before {
transform: scaleY(1);
}
}
}
巧用background-size方式
- 设置 background-color 默认背景色，同时也设置
background-image为线性渐变色（通过参数控制成纯色）； - 通过
background-size设置成 0% 100% 隐藏线性渐变色（实际为纯色）； - 鼠标悬停时，设置
background-size为 100% 100% 出现通过background-image控制的线性渐变色：
.wipe {
background-color: #1e7a90;
background-image: linear-gradient(0, white, white);
background-size: 0% 100%;
background-repeat: no-repeat;
transition: all ease-in-out 300ms;
&:hover {
background-size: 100% 100%;
}
}
半透明蒙层
半透明纯色蒙层覆盖在图片上是网站构建中常见的一种设计模式：
伪元素方式
通过伪元素 ::before 生成半透明色的遮罩层：
.banner {
position: relative;
background: url(val(--bgImg)) no-repeat center center;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 70%);
}
}
Background-blend-mode方式
background-blend-mode 属性定义了背景层的混合模式（图片 background-image 与颜色 background-color）:
.banner {
background: rgb(0 0 0 / 70%) url(val(--bgImg)) no-repeat center center;
background-blend-mode: overlay;
}
高斯模糊局部蒙层
高斯模糊/毛玻璃的效果除了可以突出强调局部的内容，还有助于视觉点缀，让图片和整个模块更有层次感，比如可以使图片展示和文字介绍达成视觉的一致性和协调性，展示二者的同时又不会过于突兀鲜明：
伪元素方式
使用伪元素创建新的遮罩层，并使用 blur() 方法将高斯模糊应用于输出图片：
.description {
position: relative;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(XX) no-repeat center bottom;
background-size: 100% auto;
filter: blur(10px);
}
}
backdrop-filter方式
backdrop-filter 是让当前元素所在区域后面的内容模糊灰度或高亮之类，要想看到效果，需要元素本身半透明或者完全透明。可以使用该属性实现同等效果：
.description {
backdrop-filter: blur(10px);
}
总结
前端技术虽然起步相对较晚但速度远超预期，有许多旧方式实现的代码方案，可以使用新的CSS技术渲染出同等的效果，且代码更精简和易于维护，大家一起来讨论更多好玩的新方案吧 (っ´▽`)っ
参考
Reducing The Need For Pseudo-Elements - Smashing Magazine
7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS