before和：after伪元素

before 和 after 都是前端经常使用到的伪元素，在中文的直接翻译里，

        before 表明着 以前

        after  表明着 以后

在css中，也大概是这样子；

以下代码：

HTML代码      

<p class="box">this is element</p>

css代码

   

        //before 中文翻译为在前 
        //after  中文翻译为在后
        p.box{
            width:500px;
            border:solid 1px blue;
            padding:20px;
        }
        p.box:before{
            content:'this is before';
            border:solid 1px pink;
            padding:10px;
            margin:0 10px 10px 0; 
        }
        p.box:after{
            content:"this is after";
            //使用非文本内容，注意的是不能用到引号,不然将会被认为是文本
            //content:url(../IMG/bg.jpg);
            width:40px;
            height:40px;
            border:solid 1px black;
            padding:15px;
        }

在浏览器中的效果如上；

有些浏览器不兼容伪元素，如IE6/7  好在为元素大多只是修饰做用，并不会对html的解析有多大的影响