CSS3【3】—before、after和content

最近抽了点时间，整理一下一些前端基础知识，写的不好的地方请大家踊跃留言，我会继续优化这一系列文章：

页面中的每一个元素中都默认已含有这两个子元素
before ：在什么什么之前
after ：在什么什么之后
但是可以作为一个真正的元素承载内容，（有区别）离不开 content的样式值

一、before

before：在首标签的结束位置，内部元素之前

/*要与  content连用*/
.textBox:before{
    content: "子曰：";
    color: red;
    width: 500px;
    display: inline-block;
}

二、after

after：在什么什么之后，与before用法相同

.textBox{
        width:300px;
        height: 300px;
        border:2px solid #000;
 }
.aa{
      width: 100px;
      height:100px;
      border:1px solid red;
 }
.textBox:after{
    content: "_____鲁迅";
 }

三、content

   .textBox:before{
        /*content中的值
	        1  字符串
	        2  url（）
	        3  元素的属性值 */
        /*content: "《";*/
        content: url("zlb.jpg");
        /*content: attr(data-content);*/
    }
    .textBox:after{
        content: "》";
    }