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

给大家推荐一个实用面试题库

1、前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库

伪类和伪元素

首先我们需要搞懂两个概念，伪类和伪元素，像我这种没有系统全面性的了解过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 伪元素匹配用户选择的元素部分。也就是给我们鼠标滑动选中的部分设置样式，它可以设置以下属性

• color
• background
• cursor
• outline

以上几种我们简单了解一下就可以了，也不在我们今天的讨论范围之内，今天我们来着重了解一下::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;
    }
复制代码

伪元素能实现的创意用法还有很多，如果大家有不同的用法，欢迎分享，希望本篇文章可以对大家有所帮助。

给大家推荐一个实用面试题库

1、前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库