css伪元素中的before和after的简单使用

1、伪元素的大概含义：

CSS伪元素是用来添加一些选择器的特殊效果。

CSS伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。

CSS中表现形式为：

[code]selector.class:pseudo-element {}

2、含义：

":before" 伪元素可以在元素的内容前面插入新内容。

":after" 伪元素可以在元素的内容之后插入新内容。

[code]/*在文字前面添加图片*/
.p3:before
{
content: url(image/3.jpg);
}
/*在文字后面添加图片*/
.p4:after
{
content: url(image/3.jpg);
}

3、伪元素的属性

1)content属性

 如上面代码所见：每个伪元素必须要有content属性，不然浏览器不能识别，如果不想添加一些内容，可以为content属性添加空引用作为它的值(即:content:“”)。也可以为content属性添加一个图像的url 如上代码所示（这也是我今天学习的主要方面）这类添加方式有点像css里面的background-image:背景图片添加

2）标签属性

伪元素也是元素，由于伪元素默认是内联元素，所以如果要使得盒模型中的width、height等属性有效的话，就必须要把它转化为块元素，具体就是设置其display属性为block,或者设置为float等。如下（除此之外伪元素还可以定义position等属性）

[code]​

.p3:before
{
content: url(image/3.jpg);
display: block;
width: 200px;
height: 300px;
}

.p4:after
{
content: url(image/3.jpg);
display: block;
width: 200px;
height: 300px;
}
​

效果图：

看到效果图，就知道用background-image属性也可以实现；

[code].p4:after
{
content:’’;
background-image:url(image/3.jpg);
background-size:100px 200px;
position: absolute;
width:100px;
height:200px;
}

4、关于兼容性问题

我只想说他的兼容性很好，基本的浏览器都支持；

5、补充说明一下

1、在css3中中伪元素使用::,伪类使用:, 因而形式为:: before, ::after不过浏览器基本都能识别单冒号形式，所以为了更好的兼容一般都使用单冒号

2、其他伪元素有：

"first-line" 伪元素用于向文本的首行设置特殊样式。

"first-letter" 伪元素用于向文本的首字母设置特殊样式：

总结：

这篇博客或许相对他人而言，不够充分有量，知识点只是汪洋中的一叶轻舟，不过对我而言，我今天学的就是添加图像为主的知识，我一直相信一积一累，终成江河。