CSS3：伪对象选择器

1.   :before     选择器在被选元素的内容前面插入内容。

   :after     选择器在被选元素的内容后面插入内容。

注意：before 和after必须和content结合使用，即使没有内容插入也要写content=' '

示例代码：

#poem:before{
    content: '最是那一低头的温柔，';
}
#poem:after{
    content: '不胜凉风的娇羞。';
}

<p id="poem">像一朵水莲花，</p>

运行结果：

2.小示例：

#user{
    width: 300px;
    height: 30px;
    border: #24164c solid 1px;
    margin: auto;    /*该div居中显示*/
    padding:0px;
    font-size: 14px;
}
#user input{
    width: 200px;
    height: 30px;
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
    border:none;
}
#user:before{
    content: '';
    width: 31px;
    height: 24px;
    display: inline-block;        /*默认是行内显示，没有高度的，要通过display属性来使得宽高起作用*/
    background: url("icon1.PNG") no-repeat;
    vertical-align: middle;
    margin: 0 2px 0 5px;   /*上右下左*/

}
#user:after{
    content: '';
    width: 25px;
    height: 25px;
    display: inline-block;   /*只有添加了这个属性，背景图片才会显示出来*/
    background: url("icon2.png") no-repeat;
    vertical-align: middle;      /*居中对齐*/
    margin: 0 2px 0 20px;
}

<div id="user">
    <input type="text"  value="username">
</div>

运行效果：