CSS::before和::after伪元素允许您在任何非替换元素之前和之后插入“内容”。这有效地允许您在网页上显示 HTML 内容中可能不存在的内容。您不应该将它用于实际内容，因为它不是很容易访问，因为您甚至无法选择和复制以这种方式插入页面上的文本——它只是装饰性内容。
给元素设置伪元素的时候，必须设置其content属性，浏览器才会将这些元素插入到选择的元素中。该值可以设置为空字符串：content: ""。
::before 表示在原始元素的实际内容之前表示一个可设置样式的子伪元素
::after 在原始元素的实际内容之后立即表示一个可设置样式的子伪元素。
默认情况下插入的新元素是内联元素。将元素插入DOM后，可以像修改其他元素一样对其进行设置CSS样式，这给了我们很多控制权及想象力。接下来将介绍几个不同的实用示例，通过::before以及::after来创建有趣的效果。
破碎图片占位
当用户网络出现问题的时候，可能会造成某些图片的访问失败，从而浏览器将显示一张损坏的图片图标及设置的图片的alt文字。
image.png
这样极其影响界面美观，且不同的浏览器破碎图标还会不太一样，因此可以通过伪元素自定义占位符。首先，我们要在图片元素上使用相对定位，然后再将其中一个伪元素使用绝对定位覆盖整个图片元素。
先给伪元素设置基本的背景色及边框样式；由于默认添加的伪元素是行内元素，所以需要让它变成块元素；然后content通过attr获取图片alt的文字并设置居中。
img::before {
background-color: #eeeeee;
border: #aaaaaa;
display: block;
height: 100%;
content: attr(alt);
text-align: center;
}
最终效果如下：
image.png
自定义引用样式
当你需要用到其他作品的引用或摘录，需要用到引用的效果，让读者能在视觉上直观的感受到。比如我们需要对本文开始的那段文字增加一个前后引号的引用效果，可以按如下方式。
首先还是需要对引用的元素本身增加相对定位。然后使用::before第一个引号和::after结束引号。
blockquote::before {
content: open-quote;
top: 0;
left: 0;
}
blockquote::after {
content: close-quote;
bottom: 0;
right: 0;
}
公共部分：
blockquote::before,
blockquote::after {
background-color: #cccccc;
display: block;
width: 60px;
height: 60px;
line-height: 1.618;
font-size: 3em;
border-radius: 100%;
text-align: center;
position: absolute;
}
最终效果如下:
image.png
自定义列表图标
当我们使用有序(<ol>)和无序(<ul>)列表的时候，两者都会显示浏览器的默认样式。使用::before伪元素，我们则可以自定义显示样式，可以是图标或者其他的CSS样式都可以。
li::before {
content: "😊";
}
效果如下：
image.png
switch动画滑动开关
切换开关用于在选中和未选中状态之间切换，所以在实现的过程中还要加上切换过程中的动画效果。
首先还是一样的给input标签增加相对定位；::before伪元素主要实现滑块的背景区域；::after主要实现滑块的圆形部分；通过input选中伪类:checked增加不同的样式并增加translate过渡动画。
input::before {
background: #999;
border-radius: 50px;
content: "";
height: 80%;
position: absolute;
top: 50%;
transform: translate(4px, -50%);
width: 88%;
}
input::after {
background: #fff;
border-radius: 50px;
content: "";
height: 25px;
opacity: 0.6;
position: absolute;
top: 50%;
transform: translate(7px, -50%);
transition: all .4s;
width: 25px;
}
选中后的样式：
input:checked::before {
background: #409eff;
}
input:checked::after {
opacity: 1;
transform: translate(170%, -50%);
}
最后的效果如下：
image.png
图片渐变叠加
有时候我们需要在图片上展示一些说明文字，提高图片的可读性。但是如果直接在图片上展示文字，会显得相对突兀，可以通过伪元素增加一个渐变的过程，可以让图片从渐变中显示出来。
figure::before {
background-image: linear-gradient(to top right, #1a1a1a, transparent);
content: "";
height: 100%;
position: absolute;
width: 100%;
}
最终效果如下：
image.png
苹果充电线
最后来一个比较复杂的通过CSS实现苹果手机充电线的效果，只用了一个div即可实现，借助了::before以及::after伪元素。有兴趣的同学可以看看源码。
image.png
源码地址： https://code.juejin.cn/pen/7103068348291743781
除开本文所列举的场景，伪元素还可以在很多的场景大展身手，你有通过伪元素实现什么效果吗，欢迎留言讨论。看完觉得有用，记得点赞收藏起来吧，说不定哪天就用上啦~
专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
网友评论