详解css中伪元素::before和::after和创意用法

本文为稀土技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！

伪类和伪元素

首要咱们需求搞懂两个概念，伪类和伪元素，像我这种没有系统全面性的了解过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://www.6hu.cc/wp-content/uploads/2022/12/1671168628-9bce38b8a0b9567.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;
    }

伪元素能完成的构思用法还有许多，假如咱们有不同的用法，欢迎共享，希望本篇文章能够对咱们有所帮助。