:before和:after的作用就是在指定的元素內容（而不是元素本身）之前或者之后插入一個包含content屬性指定內容的行內元素，最基本的用法如下：
#example{
width:300px;
height:40px;
line-height:40px;
border:1px solid #e2e2e2;
margin-top:100px;
margin-left:100px;
text-align:center;
}
#example:before {
content: "#";
color: #f6f;
}
#example:after {
content: "$";
color: red;
}
這段代碼會在#example元素內容之前插入一個'#'，以及在內容之后添加一個'$'，插入的行內元素是作為#example的子元素，效果如下:
需要注意的是如果沒有content屬性，偽類元素將沒有任何作用。但是可以指定content為空，插入的內容默認是一個行內元素，並且在HTML源代碼中無法看到，這就是為什么稱之為偽類元素的理由，所以也就無法通過DOM對其進行操作。
#example:before {
content: "";
display: block;
width: 100px;
height: 100px;
}
偽類元素也會像其他子元素一樣正常繼承父元素的一些CSS屬性，比如字體等。
