CSS3：伪对象选择器

来源：互联网发布：有了源码怎么架设游戏编辑：程序博客网时间：2024/06/08 18:58

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>

运行效果：

0 0