CSS中before、after伪类选择器的巧用

时间 2020-02-02

标签 css 选择器巧用栏目 CSS 繁體版

原文原文链接

你们好，今天给你们带来使用css中 before 、 after 实现两个效果，话很少说，咱们先来看看， before 和 after 它们的做用是什么css

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

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

使用场景一：

咱们常常在论坛中看到以下效果：code

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

 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中为空也就是''，那么咱们在页面中看不到任何内容，可是这个元素仍是存在的），好咱们看看这段代码的结果图片

效果很棒吧！！it

使用场景二：

咱们先看看一张图片：io

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

 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>

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

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