当前位置:主页 > 站长学院 > 网页设计 >

详解css3中的伪类before和after基本用法与示例

YouYou 发布于 2021-01-25
频道:网页设计

before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪类应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪类的意识,要使用顶多也就是跟风的“清除浮动”应用。

1.基本用法

:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下:

  1. #example:before { 
  2.  
  3.     content: "#"
  4.  
  5.     color: red; 
  6.  
  7.  
  8.    
  9.  
  10. #example:after { 
  11.  
  12.     content: "$"
  13.  
  14.     color: red; 
  15.  

这两个伪类都属于内联元素,但是用display:block;属性可以将其转换成块状元素,比较常见的用法就是样式的一些实现,还有就是清除浮动的效果。。

2.样式修改

代码如下所示:

  1. <div class="quote"
  2.  
  3.     <span>小户型</span> 
  4.  
  5. </div> 
  6.  
  7. .quote:before,.quote:after{//用这两个伪类实现样式渲染 
  8.  
  9.      content:""
  10.  
  11.      display:inline-block; 
  12.  
  13.      width:5%; 
  14.  
  15.      margin:5px 1%; 
  16.  
  17.      border-bottom:1px solid blue; 
  18.  

实现效果如下图所示:

样式修改

3.清除浮动

代码如下所示:

  1. <div class="parent"
  2.  
  3.     <div class="box1"></div> 
  4.  
  5.     <div class="box2"></div> 
  6.  
  7. </div> 
  8.  
  9. <div class="parent2">parent2</div> 
  10.  
  11. //css代码 
  12.  
  13. .box1{ 
  14.  
  15.      width:300px; 
  16.  
  17.      height:200px; 
  18.  
  19.      background-color: lightgray; 
  20.  
  21.      float:left; 
  22.  
  23.  
  24. .box2{ 
  25.  
  26.      width:300px; 
  27.  
  28.      height:100px; 
  29.  
  30.      background-color: lightblue; 
  31.  
  32.      float:left; 
  33.  
  34.  
  35. .parent2{ 
  36.  
  37.      width:400px; 
  38.  
  39.      height: 400px; 
  40.  
  41.      background-color:blue; 
  42.  
  43.      color:#fff; 
  44.  
  45.      text-align:center; 
  46.  
  47.      line-height:400px; 
  48.  
  49.      font-size:30px; 
  50.  

因为浮动的问题,实现效果如下所示:

清除浮动前效果

如果在上面代码中加上这段代码用来清除浮动则会达到不一样的效果:

  1. .parent:after{ 
  2.  
  3.      content:""
  4.  
  5.      display:block;//设为块状元素 
  6.  
  7.      clear:both;   //用这个属性来清除浮动 
  8.  

达到的效果如下图所示:

清除浮动后的效果图片

    打赏是您对我们最大的鼓励!

    扫一扫打赏
    相关评论

    评论列表(条)

      ×
      QQ在线客服

      服务中心

      zfzf