您的位置：首页 > Web前端 > css > 正文

CSS伪元素:before, :after

更多 时间：2015-7-5 类别：Web前端 浏览量：1067

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>大标题</
 
    
  
    标签：CSS   
    
 
    
 
    

    

    
              
  • 上一篇：CSS3 transition过渡效果
    •                 	  
			  
  • 下一篇：js中字符串拼接
    • 

  
     


    
  
    
      您可能感兴趣
    • 首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利