標籤與before,after僞元素生成加號

1. before 僞元素在元素以前添加內容。
2. ::after僞元素在元素以後添加內容。

注意：

1. CSS2及之前的使用方法是a:before，CSS3規定的是a::before，爲防止兼容性的問題，建議使用a::before。
2. 該僞元素針對行內元素。以a:before爲例，添加的內容也是在中。

應用舉例：使用一個<div>標籤生成一個加號（寬150px，高50px），如圖：

實現思路以下：

首先定義一箇中心爲頁面中心的150*150的div標籤，而後利用before與after僞元素向div標籤中添加一個橫向與一個縱向的紅色矩形

實現代碼以下：

html:

<div class="jia"></div>

css:

.jia{

   position:absolute;

   width:150px;              height:150px;

   top:50%;                    left:50%;

   margin-left:-75px;     margin-top:-75px;

  

}

.jia::before,.jia::after{

   position:absolute;

  background-color:red;

  content:""

}

.jia::before{

  width:150px;

  height:50px;

  top:50px;

}

.jia::after{

  width:50px;

  height:150px;

  left:50px;

}