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

CSS伪元素:before, :after

CSS伪元素:before, :after

猜您喜欢

热门推荐