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

详解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: '回答:'
    }
复制代码

image.png

当然也可以添加形状,默认的是行内元素,如果有需要,我们可以把它变为块级元素

  <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%;
    }
复制代码

image.png

我们也可以使用它来添加图片

  <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);
    }
复制代码

image.png

不过这一方法的缺点就是,不能调整图片大小,如果我们需要使用伪元素添加图片的话,建议通过给伪元素设置背景图片的方式设置

结合clear属性清除浮动

我们都知道清除浮动的一种方式就是给一个空元素设置clear:both属性,但在页面里添加过多的空元素一方面代码不够简洁,另一方面也不便于维护,所以我们可以通过给伪元素设置clear:both属性的方法更好的实现我们想要的效果

禁用网页ctrl+f搜索

有些时候,我们不想要用户使用ctrl+f搜索我们网页内的内容,必须在一些文字识别的网页小游戏里,我们又不想把文字做成图片,那么就可以使用这个属性,使用::before::after渲染出来的文字,不可选中也不能搜索。当然这个低版本浏览器的兼容性我木有试,谷歌浏览器和safari是可以实现不能选中不可搜索的效果的。

拿上面的示例进行尝试,可以看到,我们使用伪元素添加的[问题]两个字,就无法使用浏览器的搜索工具搜到。

image.png

制作一款特殊的鼠标滑入滑出效果

这个效果还是之前一个朋友从某网站看到之后问我能不能实现,我去那个网站查看了代码学会的,觉得很有趣,特意分享给大家。

可以先看一下效果

QQ20221107-211031-HD (1).gif

这里附上源码和在线演示

    .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;
    }
复制代码

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

分类:
前端
标签: