注册有礼

CSS中before和after怎样使用呢

Admin 2022-11-18 群英技术资讯 952 次浏览

上一篇：CSS中rem属性怎样设置和使用，有哪些要注意 下一篇：CSS3线性渐变怎样创建，有哪些效果？
这篇文章主要讲解了“CSS中before和after怎样使用呢”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。


什么是:before和:after？ 该如何使用他们？

:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。

下面我们先跑个简单的代码测试下效果：

CSS Code 
  2.   p:before{   
  3.       content: "H"  /*:before和:after必带技能，重要性为满5颗星*/  
  4.   }   
  5.   p:after{   
  6.       content: "d"  /*:before和:after必带技能，重要性为满5颗星*/  
  7.   }   
  8.   

  9. ello Worl

      

以上的代码将会在页面中展现的是”Hello World”。我们通过浏览器的”审查元素”看到的内容是：

XML/HTML Code 
  1. p>  
  2.   ::before   
  3.   "ello Worl"   
  4.   ::after   
  5. p>  

p标签内部的内容的前面会被插入一个:before伪元素，该伪元素内包含的内容是”H”；而在p标签内的内容后面会被插入一个:after伪元素，该元素包含的内容是”d”。作为一只合格的程序猴子，捍卫”Hello World”的完整存在是必要的。

既然笔记主要针对是:before和:after，那么肯定不会只是仅仅有以上的简单介绍就完事。下面我们看看平常该怎么使用他们。

1.结合border写个对话框的样式。

将上面这句话拆成2部分：结合border，写个对话框的样式。

既然是结合border，那么我们先转个小话题，简单由浅入深的介绍下怎么用border画三角形样式(这个三角形在写对话框样式的时候需要)：

CSS Code 复制内容到剪贴板
  2.   .triangle{   
  3.       width: 0;   
  4.       height: 0;   
  5.       border-left:50px solid red;   
  6.       border-bottom:50px solid blue;   
  7.       border-top:50px solid black;   
  8.       border-right:50px solid purple  
  9.   }   
  10.   
  11. "triangle">
     class=
  

以上代码将会在页面上展示一个正方形，左边是个红色的三角形，右边是紫色的三角形，上面是黑色的三角形，下面是蓝色的三角形。那么有人就会问，我们要的不是三角形么？野兽你画个正方形逗我呢？

我们对上面的样式做些修改：

CSS Code 
  1. .triangle{   
  2.     width: 0;   
  3.     height: 0;   
  4.     border:50px transparent solid; /*这里我们将元素的边框宽度设置为50px，transparent表示边框颜色是透明的，solid表示边框是实线的*/  
  5.     border-top-color: black;  /*这里我们仅将上边框的颜色设置为黑色，众所周知，css后面的样式代码会覆盖之前的相同的样式代码，至于其他三边的还是透明色*/  
  6.     /*border-bottom-color: black; /*这里设置底部边框色为黑色*/  
  7.     border-left-color: black;  /*这里设置左边边框色为黑色*/  
  8.     border-right-color:black*/ /*这里设置右边边框色为黑色*/  
  9. }  

然后这时我们就会看到一个在顶部的方向向下的三角形。解释已详细的写在css样式的注释里。

接下来我们加上:before：

CSS Code 
  2.   .test-div{   
  3.       position: relative;  /*日常相对定位*/  
  4.       width:150px;   
  5.       height:36px;   
  6.       border-radius:5px;   
  7.       border:black 1px solid;   
  8.       background: rgba(245,245,245,1)   
  9.   }   
  10.   .test-div:before{   
  11.       content: "";  /*:before和:after必带技能，重要性为满5颗星*/  
  12.       display: block;   
  13.       position: absolute;  /*日常绝对定位*/  
  14.       top:8px;   
  15.       width: 0;   
  16.       height: 0;   
  17.       border:6px transparent solid;   
  18.       left:-12px;   
  19.       border-right-color: rgba(245,245,245,1);   
  20.   }   
  21.   
  22. "test-div">
     class=
  

通过以上代码，我们将会看见一个类似微信/QQ的对话框样式,但是美中不足的是，在对话框的四周的边框不是完整的，而是在对话框的突出三角形上是木有边框的T_T瞬间冷场有木有，该怎么办呢？让召唤:after穿着棉大衣来救场吧~

完整代码：

CSS Code 
  2.   .test-div{   
  3.       position: relative;  /*日常相对定位*/  
  4.       width:150px;   
  5.       height: 36px;   
  6.       border:black 1px solid;   
  7.       border-radius:5px;   
  8.       background: rgba(245,245,245,1)   
  9.   }   
  10.   .test-div:before,.test-div:after{   
  11.       content: "";  /*:before和:after必带技能，重要性为满5颗星*/  
  12.       display: block;   
  13.       position: absolute;  /*日常绝对定位*/  
  14.       top:8px;   
  15.       width: 0;   
  16.       height: 0;   
  17.       border:6px transparent solid;   
  18.   }   
  19.   .test-div:before{   
  20.       left:-11px;   
  21.       border-right-color: rgba(245,245,245,1);   
  22.       z-index:1   
  23.   }   
  24.   .test-div:after{   
  25.       left:-12px;   
  26.       border-right-color: rgba(0,0,0,1);   
  27.       z-index: 0   
  28.   }   
  29.   
  30. "test-div">
     class=
  

好了，完整的一个对话框样式呈现在眼前了，至于对话框的小三角形的方向，相信大家看了上上段对于border介绍的代码也都知道该怎么做了吧，没错，就是改下position的位置，改下border显示颜色的方位~ (本兽不喜欢贴图片，体谅下额，需要的可以拷贝代码直接运行看效果，造轮子不仅仅是造轮子，也能让人加深印象，更好的理解)

2.作为内容的半透明背景层。

比如我们的需求是做一个半透明的登录框吧(这里也是在代码中通过注释来解释)：

CSS Code 
  2.     body{   
  3.         background: url(img/1.jpg) no-repeat left top /*这里本兽加了个图片背景，用以区分背景的半透明及内容的完全不透明*/  
  4.     }   
  5.     .test-div{   
  6.         position: relative;  /*日常相对定位(重要，下面内容也会介绍)*/  
  7.         width:300px;   
  8.         height: 120px;   
  9.         padding: 20px 10px;   
  10.         font-weight: bold;   
  11.     }   
  12.     .test-div:before{   
  13.         position: absolute;  /*日常绝对定位(重要，下面内容也会略带介绍)*/  
  14.         content: "";  /*:before和:after必带技能，重要性为满5颗星*/  
  15.         top:0;   
  16.         left: 0;   
  17.         width: 100%;  /*和内容一样的宽度*/  
  18.         height: 100%;  /*和内容一样的高度*/  
  19.         background: rgba(255,255,255,.5); /*给定背景白色，透明度50%*/  
  20.         z-index:-1 /*日常元素堆叠顺序(重要，下面内容也会略带介绍)*/  
  21.     }   
  22.   
  23.   
  24. "test-div">   
     class=
  25.        
    •         
    •   
      •             
      •   
        •             
        •   
          •         
          •     
            •         
            •   
              •             
              •   
                •             
                •   
                  •         
                  •     
                    •         
                    •   
                      •             
                      •   
                        •             
                        •   
                          •         
                          •   
                            •     
                            Name "your name" /> placeholder=
                            Password "your password" /> placeholder=
                              "button" value="login" /> type=
                              
                          •  
  

上面的代码拷贝过去，加上张图片可测试效果。

当然，:bofore和:after也还有其他更多的巧妙用法，这里也不一一列出来了，这里放上一个用这两个伪元素加上css3动画实现一些比较好看及实用的动态效果的链接：HoverEffectIdeas

说完了:before和:after，我们稍微扯扯一些其他的css样式及布局注意点(可能大家不怎么注意，从而导致一些布局和样式出问题)。

position 定位的问题

position属性规定了元素的定位类型，默认为static。

该属性还可以有下值：

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
inherit：规定应该从父元素继承 position 属性的值。

代码：

CSS Code 
  1.   
  2.   
  3.       body{   
  4.           height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/  
  5.       }   
  6.       .test-div{   
  7.           position:absolute;   
  8.           left:50px;   
  9.           top:50px  
  10.       }   
  11.      
  12.   
    "test-div">Hello World
     class=
  
  •   
  •   
  •       body{   
  •           height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/  
  •       }   
  •       .test-div{   
  •           position:fixed;   
  •           left:50px;   
  •           top:50px  
  •       }   
  •      
  •   
    "test-div">Hello World
     class=

  

  •   
  •   
  •       .out-div{   
  •           width: 300px;   
  •           height: 300px;   
  •           background: purple;  /*这里定义个背景，让我们知道这个div在哪*/  
  •           margin:50px 0px 0px 50px;   
  •           position: relative  
  •       }   
  •       .in-div{   
  •           position:absolute;   
  •           left:50px;   
  •           top:50px  
  •       }   
  •      
  •   
    "out-div">   
     class=
  •       
    "in-div">Hello World   
     class=
  •      
  •   

z-index 元素堆叠排序

z-index用于设置或检索对象的堆叠顺序，对应的脚本特性为zIndex。

z-index的数值越大，该元素的堆叠层级越高。

代码：

CSS Code 
  2.      .first-div{   
  3.          width: 300px;   
  4.          height: 300px;   
  5.          background: purple;  /*这里定义个背景，让我们知道这个div在哪*/  
  6.          position: absolute;   
  7.          left:50px;   
  8.          top:50px;   
  9.          z-index: 1   
  10.      }   
  11.      .second-div{   
  12.          position:absolute;   
  13.          left:80px;   
  14.          top:80px;   
  15.          width:50px;   
  16.          height: 50px;   
  17.          background: white;   
  18.          z-index: 2   
  19.      }   
  20.     
  21.  
    "first-div">
     class=
  
  •  
    "second-div">
     class=

  

这里我们将第一个div和第二个div位置放到一起，方便看z-index的效果。以上代码的样式是紫色的正方形里面有个白色的小正方形。因为小正方形的z-index大于大正方形的z-index，所以能显示出，当我们把.first-div的z-index设置为3，这时候就看不到白色的小正方形了，它被紫色的大正方形无情的挡掉了…

zoom 元素缩放比例

zoom适用于所有元素，用于设置或检索对象的缩放比例，对应的脚本特性为zoom，原比例的值是1。

代码：

CSS Code 复制内容到剪贴板
  2.     .first-div{   
  3.         width: 100px;   
  4.         height: 100px;   
  5.         background: purple;   
  6.         zoom:1.5;   
  7.         float: left  
  8.     }   
  9.     .second-div{   
  10.         width: 100px;   
  11.         height: 100px;   
  12.         background: black;   
  13.         zoom:1;   
  14.         float:left  
  15.     }   
  16.     .third-div{   
  17.         width: 100px;   
  18.         height: 100px;   
  19.         background: red;   
  20.         zoom:.5;   
  21.         float:left  
  22.     }   
  23.   
  24. "first-div">
     class=
  
  • "second-div">
     class=

  

  • "third-div">  
     class=

以上代码将会展示的依次是紫色-黑色-红色的div，大小分别是100px的1.5倍，1倍，0.5倍。

em 和 rem 是什么

1em等于当前的字体尺寸，数值的改变意味着字体大小的调整。em 有继承这个特性，也就是说，外部父元素定义了字体的em大小，内部子元素会继承这一属性的样式。

rem = root em 。顾名思义，root即根部的，顶部的。也就是根部的em，这个根部指的是HTML根元素。所以rem的大小是针对HTML根元素的大小做字体的相对大小的调整。

代码：

CSS Code 
  2.     body{   
  3.       font-size: 12px;     
  4.     }   
  5.     /*html{  
  6.         font-size: 12px;  
  7.     }*/  
  8.     .first-div{   
  9.         width: 200px;   
  10.         height: 100px;   
  11.         font-size: 1em;   
  12.         float: left  
  13.     }   
  14.     .second-div{   
  15.         width: 200px;   
  16.         height: 100px;   
  17.         font-size: 2em;   
  18.         float:left  
  19.     }   
  20.     .third-div{   
  21.         width: 200px;   
  22.         height: 100px;   
  23.         font-size: 1rem;   
  24.         float:left  
  25.     }   
  26.     .fourth-div{   
  27.         width: 200px;   
  28.         height: 100px;   
  29.         font-size: 2rem;   
  30.         float:left  
  31.     }   
  32.   
  33. "first-div">Hello World
     class=
  
  • "second-div">Hello World
     class=

  

  • "third-div">Hello World   
     class=
  • "fourth-div">Hello World   
     class=

以上就是关于“CSS中before和after怎样使用呢”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。 群英智防CDN，智能加速解决方案
标签： before和after

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：CSS中rem属性怎样设置和使用，有哪些要注意 下一篇：CSS3线性渐变怎样创建，有哪些效果？

猜你喜欢

云活动 云活动

推荐内容

相关标签

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
产品与服务 云服务器 智防系统 服务器租用 服务器托管 虚拟主机
帮助中心 注册与购买 备案问题 鹰云服务器问题 服务器托管问题 域名问题 高防服务器问题 服务器租用问题
关于群英 群英简介 公司动态 资质荣誉 发展历程 群英环境 汇款信息 备案中心 联系我们
其他 数据中心 生态合作
友情链接
友链合作 群英网络 智帝云 主机评测 idc公司 商城系统 跨境电商 主机吧 酷库博客 OA系统 腾讯企业邮箱 锐成信息 sdwan

关注或联系群英网络

7x24小时售前：400-678-4567

7x24小时售后：0668-2555666

24小时QQ客服

群英微信公众号

CNNIC域名投诉举报处理平台

服务电话：010-58813000

服务邮箱：service@cnnic.cn

投诉与建议：0668-2555555

Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有

增值电信经营许可证 : B1.B2-20140078    粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008

免费拨打 400-678-4567
免费拨打 400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服