详解css中伪元素::before和::after和创意用法
伪类和伪元素
首先我们需要搞懂两个概念，伪类和伪元素，像我这种没有系统全面性的了解过css的人来说，突然一问我伪类和伪元素的区别我还真不知道，我之前一直以为这两个说法指的是一个东西，就是我题目中的提到的那两个::before和::after。偶然间才了解到，原来指的是两个东西
伪类
w3cSchool对于伪类的定义是”伪类用于定义元素的特殊状态“。向我们常用到的:link、:hover、:active、:first-child等都是伪类，全部伪类比较多，大家感兴趣的话可以去官方文档了解一下
伪元素
至于伪元素，w3cSchool的定义是”CSS 伪元素用于设置元素指定部分的样式“，光看定义我是搞不懂，其实我们只要记住有哪些东西就好了，伪元素共有5个，分别是::before、::after、::first-letter、::first-line和::selection
伪类和伪元素可以叠加使用，如
.sbu-btn:hover::before，本文后面示例部分也会用到此种用法。
::first-letter主要用于为文本的首字母添加特殊样式
注意：
::first-letter伪元素只适用于块级元素。
::first-line 伪元素用于向文本的首行添加特殊样式。
注意：
::first-line伪元素只能应用于块级元素。
::selection 伪元素匹配用户选择的元素部分。也就是给我们鼠标滑动选中的部分设置样式，它可以设置以下属性
colorbackgroundcursoroutline
以上几种我们简单了解一下就可以了，也不在我们今天的讨论范围之内，今天我们来着重了解一下::before和::after，相信大家在工作中都或多或少的用过，但很少有人真的去深入的了解过他们，本文是我对我所知的关于他们用法的一个总结，如有缺漏，欢迎补充。
用法及示例
::before用于在元素内容之前插入一些内容，::after用于在元素内容之后插入一些内容，其他方面的都相同。写法就是只要在想要添加的元素选择器后面加上::before或::after即可，有些人会发现，写一个冒号和两个冒号都可以有相应的效果，那是因为在css3中，w3c为了区分伪类和伪元素，用双冒号取代了伪元素的单冒号表示法，所以我们以后在写伪元素的时候尽量使用双冒号。
不同于其他伪元素，::before和::after在使用的时候必须提供content属性，可以为字符串和图片，也可以是空，但不能省略该属性，否则将不生效。
给指定元素前添加内容
这个用法是最基础也是最常用的，比如我们可以给一个或多个元素前面或者后面添加想要的文字
<div class="class1">
<p class="q">你的名字是？</p>
<p class="a">张三</p>
<p class="q">你的名字是？</p>
<p class="a">张三</p>
<p class="q">你的名字是？</p>
<p class="a">张三</p>
</div>
.class1::before {
content: '问卷';
font-size: 30px;
}
.class1 .q::before {
content: '问题：'
}
.class1 .a::before {
content: '回答：'
}
当然也可以添加形状，默认的是行内元素，如果有需要，我们可以把它变为块级元素
<div class="class2">
<div class="news-item">今天天气为多云</div>
<div class="news-item">今天天气为多云</div>
<div class="news-item">今天天气为多云</div>
<div class="news-item">今天天气为多云</div>
<div class="news-item">今天天气为多云</div>
</div>
.news-item::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
background: rgb(96, 228, 255);
margin-right: 8px;
border-radius: 50%;
}
我们也可以使用它来添加图片
<div class="class3">
<p class="text1">阅读和写作同样重要</p>
<p class="text1">阅读和写作同样重要</p>
<p class="text1">阅读和写作同样重要</p>
<p class="text1">阅读和写作同样重要</p>
</div>
.class3 .text1::before {
content: url(https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg);
}
不过这一方法的缺点就是，不能调整图片大小，如果我们需要使用伪元素添加图片的话，建议通过给伪元素设置背景图片的方式设置
结合clear属性清除浮动
我们都知道清除浮动的一种方式就是给一个空元素设置clear:both属性，但在页面里添加过多的空元素一方面代码不够简洁，另一方面也不便于维护，所以我们可以通过给伪元素设置clear:both属性的方法更好的实现我们想要的效果
禁用网页ctrl+f搜索
有些时候，我们不想要用户使用ctrl+f搜索我们网页内的内容，必须在一些文字识别的网页小游戏里，我们又不想把文字做成图片，那么就可以使用这个属性，使用::before和::after渲染出来的文字，不可选中也不能搜索。当然这个低版本浏览器的兼容性我木有试，谷歌浏览器和safari是可以实现不能选中不可搜索的效果的。
拿上面的示例进行尝试，可以看到，我们使用伪元素添加的[问题]两个字，就无法使用浏览器的搜索工具搜到。
制作一款特殊的鼠标滑入滑出效果
这个效果还是之前一个朋友从某网站看到之后问我能不能实现，我去那个网站查看了代码学会的，觉得很有趣，特意分享给大家。
可以先看一下效果
这里附上源码和在线演示
.h-button {
z-index: 1;
position: relative;
overflow: hidden;
}
.h-button::before,
.h-button::after {
content: "";
width: 0;
height: 100%;
position: absolute;
filter: brightness(.9);
background-color: inherit;
z-index: -1;
}
.h-button::before {
left: 0;
}
.h-button:after {
right: 0;
transition: width .5s ease;
}
.h-button:hover::before {
width: 100%;
transition: width .5s ease;
}
.h-button:hover::after {
width: 100%;
background-color: transparent;
}这里我做了一些改进，就是鼠标滑入之后的颜色是对按钮本身颜色进行一定的变换得来的，这样我们就无需对每一个按钮单独设置鼠标滑入时候的颜色了，全局时候的时候只需要对目标按钮添加一个类名h-button就可以，更加的方便简单，当然，如果大家觉得这样的颜色不好看的话，还是可以自行设置，或者修改一我对颜色的处理方式
这个效果的实现思路其实很简单，就是使用::before和::after给目标按钮添加两个伪元素，然后使用定位让他们重合在一起，再通过改变两者的宽度实现的。
首先是创建两个伪元素，宽高都和目标元素一致，我这里的背景色由于是对按钮本身颜色进行处理得来的，所以给他们设置的背景色是沿用父级背景色，如果你想单独设置这里可以分别设置为自己想要的颜色。
.h-button {
z-index: 1;
position: relative;
overflow: hidden;
}
.h-button::before,
.h-button::after {
content: "";
width: 0;
height: 100%;
position: absolute;
filter: brightness(.9);
background-color: inherit;
z-index: -1;
}我们的实现原理是通过改变伪元素的宽度实现，所以我们需要第一个伪元素的定位以左边为准，从而实现鼠标移入时色块从左往右出现的效果，而第二个伪元素的定位以右为准，从而实现鼠标移出时色块从左往右消失的效果。
这里可以看到，我们在没有给第一个伪元素的初始状态添加过渡效果，那是因为它只需要在从鼠标移出的时候展示动画即可，在鼠标移出的时候需要瞬间消失，所以在初始状态不需要添加过渡效果，而第二个伪元素恰恰相反，它在鼠标滑入的时候不需要展示动画效果，在鼠标滑入也就是回归初始状态的时候需要展示动画效果，所以我们需要在最开始的时候就添加上过渡效果。
.h-button::before {
left: 0;
}
.h-button::after {
right: 0;
transition: width .5s ease;
}两个伪元素的初始宽度都为0，鼠标滑入的时候，让两个伪元素宽度都变为100%，由于鼠标滑入时我们并不需要第二个伪元素出现，所以这里我们给它的背景颜色设置为透明，这样就可以实现鼠标滑入时只展示第一个伪元素宽度从0到100%的动画，而鼠标移出时第一个伪元素宽度变为0，因为没有过渡效果，所以它的宽度会瞬间变为0，然后展示第二个色块宽度从100%到0的动画效果。
.h-button:hover::before {
width: 100%;
transition: width .5s ease;
}
.h-button:hover::after {
width: 100%;
background-color: transparent;
}伪元素能实现的创意用法还有很多，如果大家有不同的用法，欢迎分享，希望本篇文章可以对大家有所帮助。
作者：十里青山
来源：juejin.cn/post/7163867155639828488
