大家好,今天给大家带来使用css中 before 、 after 实现两个效果,话不多说,我们先来看看, before 和 after 它们的作用是什么
选择器 | 作用 |
before | 向选定的元素前插入内容 |
after | 向选定的元素后插入内容 |
作用描述简单也容易理解,就是在指定的元素前面或者后面添加额外的内容,那么具体我们能够用到什么地方呢?
使用场景一:
我们经常在论坛中看到如下效果:
这类似一个菜单,点击标题就可以快速跳转到指定的页面,而这些标题之间都有一个“>”符号进行间隔,而这个效果,我们就可以使用它们来实现了,下面贴上代码片段
1 <head> 2 <meta charset="UTF-8"> 3 <title>before、after伪类选择器演示</title> 4 <style> 5 a { 6 text-decoration: none; 7 font-size: 14px; 8 color: #4687ff; 9 } 10 /* 在a便签后面插入>符号并设定颜色以及间隔 */ 11 a:after { 12 content: '>'; 13 color: #c3c3c3; 14 margin-left: 5px; 15 } 16 /* 将最后一个a便签的符号去掉 */ 17 a:last-of-type:after { 18 content: ''; 19 } 20 </style> 21 </head> 22 <body> 23 <a href="#">首页</a> 24 <a href="#">活动区论坛</a> 25 <a href="#">#回顾2019# ZOL月赛年末特别版 摄影作品有奖征集</a> 26 </body>
在伪类中我们看到有个属性content,它是给新插入的元素设定内容的,其中为纯文本,即便你写入各种便签,它也会以文本的形式显示(如果content中为空也就是'',那么我们在页面中看不到任何内容,但是这个元素还是存在的),好我们看看这段代码的结果
效果很棒吧!!
使用场景二:
我们先看看一张图片:
这是京东商城中的一张截图,上面有很多品牌的LOGO框,当我们将鼠标一上去后,会有一个红色框高亮显示,我们会发现在没有选中时,它们的框是浅灰色的并且比较细,而移上去后边框变为红色并且变粗了,这时我们可以想到用hover伪类选择器来实现,当鼠标一上去后,设定边框颜色以及粗细,如下面代码片段所示:
1 <head> 2 <meta charset="UTF-8"> 3 <title>hover伪类选择器演示</title> 4 <style> 5 span { 6 display: inline-block; 7 border: 1px solid #4687ff; 8 padding: 5px 8px; 9 } 10 span:hover { 11 border: 2px solid #ff5c70; 12 } 13 </style> 14 </head> 15 <body> 16 <div> 17 <span>盒子1</span> 18 <span>盒子2</span> 19 <span>盒子3</span> 20 <span>盒子4</span> 21 </div> 22 </body>
运行代码后,我们发现一个问题,的确边框颜色变红并且变粗了,但是有一个缺陷就是,边框会有轻微的错位跳动的现象,如下图所示:
现在我们就可以使用before或者after伪类来解决这一问题了,贴上代码片段:
1 <head> 2 <meta charset="UTF-8"> 3 <title>before伪类选择器实现鼠标移入边框着重显示效果</title> 4 <style> 5 /* 注意该元素需要将定位方式更改为相对布局 */ 6 span { 7 display: inline-block; 8 border: 1px solid #4687ff; 9 padding: 5px 8px; 10 position: relative; 11 } 12 /* 将插入的元素定位方式更改为绝对布局 */ 13 span:hover:before { 14 position: absolute; 15 content: ''; 16 width: 100%; 17 height: 100%; 18 border: 2px solid #ff5c70; 19 top: -2px; 20 left: -2px; 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <span>盒子1</span> 27 <span>盒子2</span> 28 <span>盒子3</span> 29 <span>盒子4</span> 30 </div>
运行后的效果,如下图所示:
整个实现的思路就是通过插入一个元素,覆盖在其上的的原理,达到效果
好了,本次的分享就到这里了。