当前位置:Web前端 > css> 正文

CSS伪元素:before, :after

时间:2015-7-5类别:Web前端

CSS伪元素:before, :after

CSS伪元素:before, :after
  •  
  • 一、CSS伪元素:before, :after的理解
  •  
  •  
  • 1、:before 伪元素在元素之前添加内容
    这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。

    2、:after 伪元素在元素之后添加内容
    这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。

  • 3、:before 和 :after将在内容元素的前后插入额外的元素;:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性。
  •  
  • 4、无论使用单引号还是双引号浏览器都能识别,但是IE8只支持单冒号格式,因而为兼容还是使用单冒号。
  •  
  •  
  •  
  • 二、CSS伪元素:before, :after的实例
  •  
  •  
  • 实例1、
  •  
  •  
  •  
  • 
    <style>
    
    .li{width:350px; border:1px solid #000; line-height:50px; margin:10px;}
    
    .lib{width:500px; border:1px solid #FC0;}
    .after,.before,.block{border:1px solid #330;}
    .after:after{content:'我在后面吧'; color:#F00;}
    .before:before{content:'我在前面吧'; color:#F00;}
    .block:after{content:'我是块元素,我占一行'; color:#F00; display:block;}
    .block{display:block;}
    
    </style>
    
    <body>
    
    <li class="li">after<span class="after">我是里面的内容</span></li>
      <li class="li">before<span class="before">我是里面的内容</span></li>
      <li class="lib">block<span class="block">我是里面的内容</span></li>
    
    </body>
    
    					
  •  
  •  
  • 效果图
  •  
  •  
  •  
  •  
  • 实例2
  •  
  •  
  •  
  •  
             <style>
    
            #li1 {
                    border: 1px solid #090;
                    padding: 10px;
                    font-size: 14px;
                    margin-bottom: 10px;
                }
    
                #li1:before{
                    content:"【";
                    color:#f00;
                    font-family:Arial;
                }
    
                #li1:after{
                    content:"】";
                    color:#f00;
                    font-family:Arial;
                }
                </style>
    
                <li id="li1">插入内容</li>
                
    			
  •  
  • 效果图
  •  
  •  
  •  
  •  
  •  
  • 实例3
  •  
  •  
  •  
  • 
    <style>
    li {
      border: 1px solid #090;
      padding: 10px;
      font-size: 14px;
      margin-bottom: 10px;
    }
    
    li:first-child:after{
        content:url(new.gif);
        margin-left:5px;
    }
    </style>
    <li>插入内容</li>
    <li>插入内容</li>
    <li>插入内容</li>
    <li>插入内容</li>
    
    			
  • 效果图

     

    实例4

  •  
  •  
  • 
    <style>
    li {
        border: 1px solid #090;
        width:78px;
        height:59px;
        padding:3px;
        position:relative;
    }
    
    li:after{
        content:attr(id);
        display:block;
        color:#f00;
        font-weight:bold;
        position:absolute;
        top:0;
        right:0;
    }
    </style>
    
    <li id="test" title="idtitle" style="width:78px;">文字内容</li>
    
    			
  • 效果图

     

    实例5、 

  •  
  • 
    <style>
            h1{
                counter-increment:mycounter;
            }
            h1:before{
                content:counter(mycounter);
            }
    </style>
    
        <h1>大标题</h1>
        <h1>大标题</h1>
        <h1>大标题</h1>
    
    
    			
  • 效果图

     

    实例6

  •  
  •  
  • 
    <style>
            h1{
                counter-increment:mycounter;
            }
            h1:before{
                content:"第"counter(mycounter,upper-roman)"章 ";
            }
    </style>
    
        <h1>大标题</h1>
        <h1>大标题</标签:
  • 上一篇下一篇

    猜您喜欢

    热门推荐