【面试题】 详解css中伪元素 before和 after和创意用法_css before

不同于其他伪元素，::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;
    }


### 总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以**底层逻辑，基础知识要掌握好！**

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。



这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 **HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法**等高频考点**238道（含答案）**！  

资料截图 ：

![](https://img-blog.csdnimg.cn/img_convert/edeaa71cbc745698bdedcfe65be40387.png)

![](https://img-blog.csdnimg.cn/img_convert/981487b285a8b90918f35c830c299df8.png)



![](https://img-blog.csdnimg.cn/img_convert/9866daffbebcf87b44d9530a59427834.png)



**高级前端工程师必备资料包**  

![](https://img-blog.csdnimg.cn/img_convert/ba803e1b69e399b6739e3d33554d42a7.png)