大家好，今天给大家带来使用css中 before 、 after 实现两个效果，话不多说，我们先来看看， before 和 after 它们的作用是什么

选择器 作用
before 向选定的元素前插入内容
after 向选定的元素后插入内容

作用描述简单也容易理解，就是在指定的元素前面或者后面添加额外的内容，那么具体我们能够用到什么地方呢？

使用场景一：

我们经常在论坛中看到如下效果：

这类似一个菜单，点击标题就可以快速跳转到指定的页面，而这些标题之间都有一个“>”符号进行间隔，而这个效果，我们就可以使用它们来实现了，下面贴上代码片段

 <head>

     <meta charset="UTF-8">

     <title>before、after伪类选择器演示</title>

     <style>

         a {

             text-decoration: none;

             font-size: 14px;

             color: #4687ff;

         }

         /* 在a便签后面插入>符号并设定颜色以及间隔 */

         a:after {

             content: '>';

             color: #c3c3c3;

             margin-left: 5px;

         }

         /* 将最后一个a便签的符号去掉 */

         a:last-of-type:after {

             content: '';

         }

     </style>

 </head>

 <body>

     <a href="#">首页</a>

     <a href="#">活动区论坛</a>

     <a href="#">#回顾2019# ZOL月赛年末特别版 摄影作品有奖征集</a>

 </body>

在伪类中我们看到有个属性content，它是给新插入的元素设定内容的，其中为纯文本，即便你写入各种便签，它也会以文本的形式显示（如果content中为空也就是''，那么我们在页面中看不到任何内容，但是这个元素还是存在的），好我们看看这段代码的结果

效果很棒吧！！

使用场景二：

我们先看看一张图片：

这是京东商城中的一张截图，上面有很多品牌的LOGO框，当我们将鼠标一上去后，会有一个红色框高亮显示，我们会发现在没有选中时，它们的框是浅灰色的并且比较细，而移上去后边框变为红色并且变粗了，这时我们可以想到用hover伪类选择器来实现，当鼠标一上去后，设定边框颜色以及粗细，如下面代码片段所示：

 <head>

     <meta charset="UTF-8">

     <title>hover伪类选择器演示</title>

     <style>

         span {

             display: inline-block;

             border: 1px solid #4687ff;

             padding: 5px 8px;

         }

         span:hover {

             border: 2px solid #ff5c70;

         }

     </style>

 </head>

 <body>

     <div>

         <span>盒子1</span>

         <span>盒子2</span>

         <span>盒子3</span>

         <span>盒子4</span>

     </div>

 </body>

运行代码后，我们发现一个问题，的确边框颜色变红并且变粗了，但是有一个缺陷就是，边框会有轻微的错位跳动的现象，如下图所示：

现在我们就可以使用before或者after伪类来解决这一问题了，贴上代码片段：

 <head>

     <meta charset="UTF-8">

     <title>before伪类选择器实现鼠标移入边框着重显示效果</title>

     <style>

         /* 注意该元素需要将定位方式更改为相对布局 */

         span {

             display: inline-block;

             border: 1px solid #4687ff;

             padding: 5px 8px;

             position: relative;

         }

         /* 将插入的元素定位方式更改为绝对布局 */

         span:hover:before {

             position: absolute;

             content: '';

             width: 100%;

             height: 100%;

             border: 2px solid #ff5c70;

             top: -2px;

             left: -2px;

         }

     </style>

 </head>

 <body>

 <div>

     <span>盒子1</span>

     <span>盒子2</span>

     <span>盒子3</span>

     <span>盒子4</span>

 </div>

运行后的效果，如下图所示：

整个实现的思路就是通过插入一个元素，覆盖在其上的的原理，达到效果
好了，本次的分享就到这里了。

CSS中before、after伪类选择器的巧用的更多相关文章

  1. CSS 中功能相似伪类间的区别

    导读: CSS3 中有许多伪类选择器,其中一些伪类选择器的作用近似却又不完全一样,下面我们就来看一看到底有什么不一样. 1.:only-child 与 :only-of-type 测试的代码: < ...

  2. 如何使用CSS3中的结构伪类选择器和伪元素选择器

    结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...

  3. CSS中的一些伪类

    一.:nth-child 和 :nth-of-type (1):nth-child() :nth-child(n) 选择器选取某任意一父元素的第 n 个子元素( p:nth-child(n) 即选中任 ...

  4. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  5. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

  6. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  7. H5与CS3权威下.19 选择器（2）结构性伪类选择器

    1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...

  8. CSS3新增的伪类选择器

    伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...

  9. css3 :enabled与:disabled伪类选择器

    css :enabled和:disabled伪类选择器 在Web表单中,有些表单元素(如输入框.密码框.复选框等)有“可用”和“不可用”这2种状态.默认情况下,这些表单元素都处在可用状态. 在CSS3 ...

随机推荐

  1. Marginalize

    在David M.Blei 的Distance Dependent Chinese Restaurant Processes 中提到:DDCRP 的一个重要性质,也是和dependent DP 的一个 ...

  2. WPF另类实现摄像头录像

    WPF中使用第三方控件来直接进行录像的控件没有找到(aforgenet好像不维护了?WPFMediaKit好像只能实现摄像头拍照.收费的控件没有使用,不做评论.) 通过百度(感谢:https://ww ...

  3. DOCKER 学习笔记7 Docker Machine 建立虚拟机实战，以及错误总结

    前言 通过以上6小节的学习,已经可以使用DOCKER 熟练的部署应用程序了.大家都可以发现使用 DOCKER 带来的方便之处,因为现在的话,只是在一台服务器上部署,这样部署,我们只需要一条命令,需要的 ...

  4. 如何优雅地使用containerd？这里有一份必读的技巧攻略

    前 言 Docker是我们常用的容器runtime,友好的CLI,丰富的社区资料,外加研发运维人员多年的经验积累,使用Docker几乎是没有任何门槛的事.而k3s为了降低资源消耗,将默认的runtim ...

  5. 文件（file 类）

    题目: 编写一个应用程序,输入一个目录和一个文件类型,显示该目录下符合该类型的所有文件.之后,将这些文件中的某一个文件剪切到另外一个目录中. 代码: File_Demo /** * 包含两个类,一个主 ...

  6. HDU_2167_状态压缩dp

    http://acm.hdu.edu.cn/showproblem.php?pid=2167 第一道状态压缩dp,其实就是爆搜,只不过把排除了大量不可能的情况,先用sta保存每行可能的情况,sum[i ...

  7. 新的起航从这里开始 Encantado!

    大家好,我是一名DBA之前也在其它地方写过blog,但是可惜目前在greatwall之内都不能访问了. 如果有小伙伴可以在墙外访问的话 可以尝试着看看这个地址 https://liuleiit.wix ...

  8. 《自拍教程17》Python调用命令

    他山之石 何为他山之石,就是借助外界工具,来实现自己想要的功能. 命令行界面软件, 即各种命令,我们也叫命令行工具, 此类工具也是测试人员或者开发人员常用的工具的一种. 测试人员可以借助这类工具,快速 ...

  9. 数据算法 --hadoop/spark数据处理技巧 --（15.查找、统计和列出大图中的所有三角形 16.k-mer计数）

    十五.查找.统计和列出大图中的所有三角形 第一步骤的mr: 第二部mr: 找出三角形 第三部:去重 spark: 十六: k-mer计数 spark:

  10. Linux系统下常见的数据盘分区丢失的问题以及对应的处理方法

    在修复数据前,您必须先对分区丢失的数据盘创建快照,在快照创建完成后再尝试修复.如果在修复过程中出现问题,您可以通过快照回滚将数据盘还原到修复之前的状态. 前提条件 在修复数据前,您必须先对分区丢失的数 ...