1.   :before     選擇器在被選元素的內容前面插入內容。

   :after     選擇器在被選元素的內容後面插入內容。

注意：before 和after必須和content結合使用，即使沒有內容插入也要寫content=' '

示例程式碼：

#poem:before{
    content: '最是那一低頭的溫柔，';
}
#poem:after{
    content: '不勝涼風的嬌羞。';
}

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

2.小示例：

#user{
    width: 300px;
height: 30
 
px;
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>