<div>标签与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;

}